Canvas element discussion

Discussion in '3DS - Games & Content' started by RedJiggly, Jun 8, 2011.

Jun 8, 2011

Canvas element discussion by RedJiggly at 8:57 PM (2,194 Views / 0 Likes) 10 replies

  1. RedJiggly
    OP

    Member RedJiggly GBAtemp Regular

    Joined:
    Jun 8, 2011
    Messages:
    215
    Location:
    There
    Country:
    Netherlands
    Hello there, people of GBATemp. This is my first post here. I've been gaming for quite some time, and I bought the 3DS as soon as I had the money for it. One of the features that made the 3DS very interesting to me was the Internet Browser.

    Now, finally, two(or three?) days ago nintendo released the update with the eShop and the Internet Browser in there. I started playing around with the Browser. At first I was sad that 'nintendo did such a bad job' with the browser. Since there is no sound support, no flash support, no html5 support and no java support.

    but more and more I realized that this wasn't true. Nintendo's goal was to create a browser wich can be opened even while another application is opened. That is quite amazing.

    Another thing I missed at first was that the browser DOES have (some) support for the Canvas element. When I realized that the browser could load Canvases, I started experimenting.


    And now, I've got a list with a few games and demos wich work on Javascript and Canvas.
    Even tough there is no sound, it's nice to know that you can play Space Invaders on there for free, right? <img src="style_emoticons/<#EMO_DIR#>/biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />


    Allright, there we go. I hope I've posted this in the correct section, and that you enjoy.


    ~RedJiggly

    <!--quoteo--><div class='quotetop'>QUOTE</div><div class='quotemain'><!--quotec--><!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Wait WHY?<!--sizec--></span><!--/sizec-->

    Before we start, for everybody claiming: "Why would you want to do something like this?"
    Well... let's just say that it's interesting because of the clear limitations of the browser. And also I've got too much free time on my hands.

    <i><b>~RedJiggly</b></i>

    <!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Compatibility of the 3DS Browser:</b><!--sizec--></span><!--/sizec-->

    <b>Specifications:
    </b>

    <i>Note: These are also listed in the manual of the 3DS browser, page 12.</i>
    <b>Browser Engine:
    </b><ul><li>NetFront® Browser. (NX v1.0)</li></ul>

    <b>Protocols:
    </b><ul><li>HTTP 1.0
    </li><li>HTTP 1.1
    </li><li>SSLv3
    </li><li>TLS 1.0</li></ul>

    <b>Web Standards:
    </b>
    <ul><li>HTML4.01
    </li><li>XHTML 1.1
    </li><li>CSS1
    </li><li>CSS2.1
    </li><li>CSS3 (some)
    </li><li>DOM levels 1-3
    </li><li>ECMAScript (this is Javascript and other dialects)
    </li><li>XMLHttpRequest
    </li><li>the Canvas Element(To a certain extent. Is slow)</li></ul>
    <b>Picture Support:
    </b><ul><li>-MPO
    </li><li>-GIF
    </li><li>-JPEG
    </li><li>-PNG
    </li><li>-BMP
    </li><li>-ICO</li></ul>
    (tough, Some files cannot be displayed)


    <b>Also interesting is that the 3DS Browser can be launched without needing to close another application.
    </b>


    <b>On the other hand however, there is:
    </b><ul><li>-No Audio Support
    </li><li>-No HTML5 Support
    </li><li>-No Flash
    </li><li>-No Java
    </li><li>-No Other Plugin-based stuff on webpages.</li></ul>


    <hr/>


    Even tough the browser lacks Flash, Java and Sound, we have some Canvas and JavaScript capabilities.
    This still means that we can do some interesting stuff. (Or at least, that we aren't totally crippled on the 3DS Browser)


    <!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>3DS Browser: Buttons.
    </b><!--sizec--></span><!--/sizec-->
    Sadly enough, the 3DS doesn't have a keyboard. That also means: no 'onkeypress' handlers in JavaScript. However, when tapping with the stylus we can simulate a click at the point on the page you tapped on.
    Also, when you hold the stylus long enough, you'll enter 'Text Copy mode'. In this mode Javascript thinks that you have the cursor down. This can also be used.

    So, if you want to play some JavaScript games wich use the keyboard, you have to creat buttons or anchors on the page, and use them as input instead.

    With this, I managed to create the following working games and demo's on the 3DS.


    EDIT: Later, I found out that the browser DOES pass the 'keydown' events of the D-pad to the page as the arrow buttons. I didn't notice this before. It is a bit strange to play since you are moving the screen around as well while moving something in the game, but it works.

    <!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>3DS-compatibel demo's/Games</b><!--sizec--></span><!--/sizec-->

    <i>(Note: I do not own nor created these games.
    The only addition I made to some was implementing on-page links so you could use the needed 'buttons' with the 3DS Stylus.)
    </i>
    <b>Solitaire</b> (<a href="http://digitalinsane.com/games/yetris/" target="_blank">http://digitalinsane.com/games/solitaire/</a>)
    <blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
    It doesn't rely on a Canvas object, making it fast.(this game runs about full speed. only dragging cards lags a little)
    This game is completely playable. I did not need to create extra links since the game doesn't need a keyboard.
    </blockquote>
    <b>Yetris. A Tetris Clone</b>(<a href="http://digitalinsane.com/games/yetris/" target="_blank">http://digitalinsane.com/games/yetris/</a>)
    <blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
    It doesn't rely on a Canvas object, making it fast.(this game runs about full speed.)
    I did not need to implement extra links for controls, since I found out that you can use the D-pad als Arrow Buttons in the browser.
    </blockquote>
    <b>Puzzle with Flickr Photos</b>(<a href="http://digitalinsane.com/games/puzzle/" target="_blank">http://digitalinsane.com/games/puzzle/</a>)
    <blockquote>---This game is fully playable on the 3DS. It was made by Kris Cieslak and uses Javascript and the YUI Engine.
    It doesn't rely on a Canvas object, making it fast.(this game runs at full speed.)
    I did not need to implement extra links for controls, since I found out that you can use the D-pad als Arrow Buttons in the browser.
    This game lets you search trough photos on Flickr, and then lets you solve a puzzle made from one of those photos.
    </blockquote>

    <b>Space Invaders Clone</b> (Edited Version:<a href="http://www.whirlislands.nl/3dstests/spaceinvaders.html" target="_blank">http://www.whirlislands.nl/3dstests/spaceinvaders.html</a>). (Original Version:<a href="http://digitalinsane.com/games/space-invaders/" target="_blank">http://digitalinsane.com/games/space-invaders/</a>)
    <blockquote>---This Space Invaders Clone was made by Kris Cieslak and uses Javascript and the YUI Engine.
    It doesnt rely on a Canvas object, making it fairly fast(around 80% speed?). This game is quite well playable.
    I put down extra links on the page to be able to control the game with the 3DS Stylus.
    </blockquote>

    <b>Pacman Clone </b>(Edited Version:<a href="http://www.whirlislands.nl/3dstests/pacman.html" target="_blank">http://www.whirlislands.nl/3dstests/pacman.html</a>). (Original Version:<a href="http://digitalinsane.com/games/pacman/" target="_blank">http://digitalinsane.com/games/pacman/</a>)
    <blockquote>---This PacMan Clone was made by Kris Cieslak and uses Javascript and the YUI Engine.
    It doesnt rely on a Canvas object, making it fairly fast(around 80% speed?). This game is quite well playable. (Actually it is too fast on a modern computer <img src="style_emoticons/<#EMO_DIR#>/tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" />)
    I put down extra links on the page to be able to control the game with the 3DS Stylus.
    EDIT: However, you can control Pacman with the D-pad as well. The enter button you'll have to press with the stylus tough.
    </blockquote>




    <!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Other Projects:
    </b><!--sizec--></span><!--/sizec-->
    <b>JavaScript8080 Arcade Game Emulator</b> (<a href="http://www.whirlislands.nl/3dstests/js8080.html" target="_blank">http://www.whirlislands.nl/3dstests/js8080.html</a>)
    <blockquote>---This Application is able to emulate the original Space Invaders, Lunar Rescue and Balloon Bomber.
    Sadly enough, it is extremely slow. Playing it is not really fun, it runs about 1 frame per second.
    HOWEVER, it works. This is great to know, don't you think?
    I created extra buttons on the page to be able to control the emulator with the 3DS Stylus.
    When trying this out, HAVE PATIENCE <img src="style_emoticons/<#EMO_DIR#>/tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" />. It really is slow.

    </blockquote>

    <b>wsIRC Client </b>(<a href="http://www.wsirc.com" target="_blank">www.wsirc.com</a>)
    <blockquote>---One of the first things I wanted on the 3DS was a IRC Client.
    Since java-based clients don't work at all, and Mibbit does not have a 'send' button,(you cannot press enter like you would do on a normal keyboard)
    I started searching for an alternative. I found an Javascript-based IRC Client called wsIRC Client.
    This client is quite small, and has a send button. It works great. One bad point is however that whenever you lose your connection, you have to retype the whole server adress, channel and username again.
    </blockquote>

    <b>Hello World Canvas</b> (<a href="http://www.whirlislands.nl/3dstests/helloworld.html" target="_blank">http://www.whirlislands.nl/3dstests/helloworld.html</a>)
    <blockquote>
    The first thing I tried to show on the 3DS. It's a simple Hello World application with a circle in the background. The Hello World text flashes a little.
    This demo is built on the CAKE.js engine, and is a slightly modified version of the Hello World example.

    </blockquote>

    <!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo--><b>Some things worth researching further:</b><!--sizec--></span><!--/sizec-->

    <b>JSNES </b>(JavaScript Nintendo Entertainment System Emulator JSNES)(<a href="http://benfirshman.com/projects/jsnes" target="_blank">http://benfirshman.com/projects/jsnes</a>)
    <blockquote>This WORKS on the 3DS. But it is extremely slow (0.10 frames per second). Also, the 3DS repeatedly asks if I want to terminate the script because of long execution time.
    I haven't implemented gameplay buttons yet. It won't be playable.
    However, it could be a nice proof of concept. After 30 seconds, I was able to see the Super Mario Bros. Menu. <img src="style_emoticons/<#EMO_DIR#>/biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />
    </blockquote>
    <b>Arkanoid 1k</b> (<a href="http://digitalinsane.com/code/arkanoid1k.html" target="_blank">http://digitalinsane.com/code/arkanoid1k.html</a>)
    <blockquote>I'm currently trying to implement this game with buttons. Since it is so small and simple, I hope it will run as fast as possible on the 3DS.
    I'm doing this mainly because I want to find out how fast a JavaScript game can actually run on the 3DS.
    This game was made by Chris Kieslak as well.</blockquote><!--QuoteEnd--></div><!--QuoteEEnd-->
     
  2. GeekyGuy

    Global Moderator GeekyGuy Professional loafer

    Joined:
    Jun 21, 2007
    Messages:
    4,739
    Country:
    United States
    Since we already have several threads related to the discussion of the update/browser, I changed the title of your thread, since the focus seems to be on utilizing Canvas.

    And welcome. [​IMG]
     
  3. Rydian

    Member Rydian Resident Furvert™

    Joined:
    Feb 4, 2010
    Messages:
    27,883
    Location:
    Cave Entrance, Watching Cyan Write Letters
    Country:
    United States
    I wonder if Nintendo could utilize hardware acceleration to make the canvas faster, or if the GPU on the 3DS is not directly comparable to a PCs in the use of shaders like that.
     
  4. RedJiggly
    OP

    Member RedJiggly GBAtemp Regular

    Joined:
    Jun 8, 2011
    Messages:
    215
    Location:
    There
    Country:
    Netherlands
    I don't know. However, I believe that the main reason for the Browser to be slow is the memory-limitation. Nintendo made the browser in a way that you can pause an application, seach some stuff in the browser and then continue with the application. This means the 3DS can only provide limited memory/CPU power for the browser, I guess.
     
  5. Fear Zoa

    Member Fear Zoa This... This is the world we live in

    Joined:
    Jun 18, 2009
    Messages:
    1,437
    Location:
    Maryland
    Country:
    United States
    I think they should allow the browser more memory if nothing is running in the background
     
  6. Paranoid Mouse C

    Member Paranoid Mouse C GBAtemp Regular

    Joined:
    Jan 29, 2006
    Messages:
    134
    Location:
    In your heap, shifting bits.
    Country:
    United States
    The browser passes the A button as well. Y, X, B, and shoulder buttons can't be handled however
     
  7. RedJiggly
    OP

    Member RedJiggly GBAtemp Regular

    Joined:
    Jun 8, 2011
    Messages:
    215
    Location:
    There
    Country:
    Netherlands
    as what does the A button show up? The A key? Or the Enter key or something?
     
  8. tajio

    Member tajio GBAtemp Fan

    Joined:
    Aug 31, 2007
    Messages:
    403
    Location:
    Northern Ireland, UK
    Country:
    United Kingdom
    As a web designer I find this very interesting. I've bookmarked this topic for future projects I'm going to make.
     
  9. Shiro09

    Member Shiro09 AAI2 Localisation Team

    Joined:
    May 4, 2010
    Messages:
    764
    Country:
    Australia
    I don't understand how to play Yetris, the keyboard wont come up and the D-Pad doesn't work
     
  10. Paranoid Mouse C

    Member Paranoid Mouse C GBAtemp Regular

    Joined:
    Jan 29, 2006
    Messages:
    134
    Location:
    In your heap, shifting bits.
    Country:
    United States
    That'll be the Enter key me thinks. Hey, check out these tests. They're pretty neat.
     
  11. gshock

    Member gshock Advanced Member

    Joined:
    Mar 8, 2008
    Messages:
    63
    Country:
    Canada
    efnet web client
    IRC web client.

    DHTML Lemmings
    (!)

    Mario Kart ...?

    FPS / Canvas "demo".
     

Share This Page