Results 1 to 17 of 17
  1.    #1  
    I have read that WebKit does not implement all the functionality of the Javascript Canvas object. I'm curious if it can draw bitmaps on top of bitmaps.

    I'm trying to make a wargame playing application.
    For those of you who are not ancient fossils like me, a wargame is a military simulation game played on a map ruled off in hexagons, with little cardboard counters as playing pieces.

    I got the scrolling map working just fine with very little effort. The UIWidgets example that came with the API includes a scrolling demo, it was easy to copy.

    But now I have to draw the playing pieces on the map. The docs for the Canvas object say it can, but is the Webkit implementation capable of this?

    And can the Webkit Canavas implementation draw and rotate a small bitmap on top of a larger one?

    Thanks!
    Attached Images Attached Images
    Last edited by nyrath; 07/30/2009 at 01:54 PM.
  2. #2  
    I'm actually working on the same type of problem for a game I'm working on, so I'm anxious to hear the answer as well.

    By the way, nyrath -- I'd be really interested to hear more about how you got the scrolling map working, I'm struggling with that just a bit right now. Also, I'm excited to hear that you're working on a wargame, that could be a lot of fun.
  3. #3  
  4.    #4  
    Quote Originally Posted by livewire1337 View Post
    Thanks!
    I did my best to search for documentation like that, but couldnt' find it.
  5.    #5  
    Quote Originally Posted by creatorbri View Post
    By the way, nyrath -- I'd be really interested to hear more about how you got the scrolling map working, I'm struggling with that just a bit right now.
    With the API came a selection of sample programs. One is called UIWidgets. In the directory \UIWidgets\app\assistants\containers\scrolling\scrolling-assistant.jsjsjs is the assistant, \UIWidgets\app\views\containers\scrolling contains the views, and there is some vital code in the \UIWidgets\stylesheets\main.css file. It displays a sickly-sweet image of two puppies \UIWidgets\images\twodogs.jpg

    You can load the UIWidget project into the emulator or your Pre to see how it works. Go to the Container section and select Scrolling.

    For my test, I made a new project named MapTest.
    In \app\assistants I put the scrolling-assistant.jsjsjs $and$ $re$-$named$ $it$ $map$-$assistant$.$js$. $I$ $then$ $edited$ $the$ $file$ $and$ $replaced$ $all$ $occurances$ $of$ ScrollingAssistant. with MapAssistant.
    I also added there a file called stage-assistant.jsjsjs $which$ $contained$
    Code:
    function StageAssistant() {
    }
    
    StageAssistant.prototype.setup = function() {
        this.controller.pushScene('map');
    }
    In \app\views\scrolling I put number_grid.html, scrolling-scene.html, and single_dog.html. I renamed scrolling-scene.html to map-scene.html.
    In \MapTest\images I put an image of the wargame map, named twodogs.jpg
    In \MapTest\stylesheets I copied main.css and renamed it maptest.css

    I think that's all I did, but I might have forgotten something.

    Of course later I renamed all the files and functions to remove the "dog" references.

    See if that helps you.
    Last edited by nyrath; 07/30/2009 at 02:50 PM.
  6. #6  
    I've been developing a tower defense game and playing with the canvas tag. But found it to have a bit of lag when drawing a lot of things fast enough to seem real-time. So I switched to putting the enemies and towers into divs and moving/rotating them by manipulating the style, and only using the canvas tag for simple things.

    Though, I could have been doing things completely wrong (due to practically no knowledge of the canvas tag prior to this project.) Or maybe its just not meant to be used for near real-time drawing.
  7.    #7  
    Quote Originally Posted by oil View Post
    I've been developing a tower defense game and playing with the canvas tag. But found it to have a bit of lag when drawing a lot of things fast enough to seem real-time. So I switched to putting the enemies and towers into divs and moving/rotating them by manipulating the style, and only using the canvas tag for simple things.

    Though, I could have been doing things completely wrong (due to practically no knowledge of the canvas tag prior to this project.) Or maybe its just not meant to be used for near real-time drawing.
    I was going to investigate using CSS like you said. It is just that I was unsure that one could do that inside an x-mojo-element="Scroller".

    But for wargames such as I am trying to make, one does not need real-time.
  8. mike_103's Avatar
    Posts
    10 Posts
    Global Posts
    11 Global Posts
    #8  
    Quote Originally Posted by oil View Post
    Or maybe its just not meant to be used for near real-time drawing.
    My understanding was that canvas tags in HTML 5 were basically supposed to minimize the need for flash/silverlight/etc. to do 2d sprite animations like you guys are doing. I'm wondering if it may just be that WebOS is still in early builds and they haven't gotten around to optimizing that yet. Could be a good thing to put in the official developer forum, just in the case Palm hasn't really noticed it yet so they will prioritize it.
  9. #9  
    Quote Originally Posted by nyrath View Post
    It is just that I was unsure that one could do that inside an x-mojo-element="Scroller".
    I don't see why not. Considering every scene is already inside a scroller widget by default...

    Quote Originally Posted by mike_103 View Post
    Could be a good thing to put in the official developer forum, just in the case Palm hasn't really noticed it yet so they will prioritize it.
    Maybe I'll do that.
    Last edited by oil; 07/30/2009 at 11:36 PM.
  10.    #10  
    Quote Originally Posted by oil View Post
    I don't see why not. Considering every scene is already inside a scroller widget by default...
    Well in that case, CSS would seem to be the way to go.

    The only other function that I was admiring from the Canvas object was the ability to draw just a small part of an image file. So if you had, say, ten types of playing pieces, instead of having ten *.png image files, you could have one image file containing all ten pieces and just draw the section you needed.

    But having separate image files for each piece is not much of a problem, I was just looking for optimization.

    The next challenge is capturing clicks on a scrolled map, and translating it into a map location. So you can click on playing pieces.

    I've done all this before on Windows and Mac using the Trolltech Qt framework (very nice, very powerful, and cross platform too) using C++ and Python. It is just a matter of translating it into WebOS.
  11.    #11  
    Hmmmmm, check out the rocket demo at the bottom of the page
    CSS: Animation Using CSS Transforms | The Art of Web
  12. #12  
    Quote Originally Posted by nyrath View Post
    you could have one image file containing all ten pieces and just draw the section you needed.

    But having separate image files for each piece is not much of a problem, I was just looking for optimization.
    You can do this with css as well (I'm using it in my td game.) Use the background-position property.

    Quote Originally Posted by nyrath View Post
    The next challenge is capturing clicks on a scrolled map, and translating it into a map location. So you can click on playing pieces.
    I don't think this should be too much of a problem. A point on a on the grid is always going to be in the same place. It doesn't change depending on where the viewport is scrolled to.
  13.    #13  
    Quote Originally Posted by oil View Post
    You can do this with css as well (I'm using it in my td game.) Use the background-position property.

    I don't think this should be too much of a problem. A point on a on the grid is always going to be in the same place. It doesn't change depending on where the viewport is scrolled to.
    Better and better. I had to do most of this manually with Python, WebOS apparently does most of the work for you.
  14.    #14  
    creatorbri, did I answer your question or do you still need help?
  15. #15  
    Quote Originally Posted by nyrath View Post
    The only other function that I was admiring from the Canvas object was the ability to draw just a small part of an image file. So if you had, say, ten types of playing pieces, instead of having ten *.png image files, you could have one image file containing all ten pieces and just draw the section you needed.
    This part isn't working in the version of webkit on WebOS.
  16. #16  
    I would love to see a good turn based stratagy game.
  17.    #17  
    Quote Originally Posted by Pokerbrothersstudio View Post
    I would love to see a good turn based stratagy game.
    Well, please be patient. I've never done a large game in Javascript before. And I'm still learning WebOS

Posting Permissions