Results 1 to 16 of 16
  1.    #1  
    First webos app ever. Looking for feedback. It's a kids memory matching game.

    Edit: Not optimixed for pixi.
    Attached Files Attached Files
    Last edited by grizzly_addams; 08/07/2010 at 03:17 PM.
  2. #2  
    Not bad. A few tips. Animate the card fliping. Google -webkit-transform for a bit of help on that. I just think it would add that extra bit of polish to the app. Also, on the 'You Win' page, you should put a 'Play Again' button. I know you can just swipe a back gesture, but adding an actual button would be a bit nicer, especially if it eliminates a step. (Title->Game->Over->Title->... vs Title->Game->Over->Game) Also, keep in mind that your target audience is kids and they are not likely to know about the back gesture.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  3.    #3  
    Quote Originally Posted by unfairSurprisery View Post
    Not bad. A few tips. Animate the card fliping. Google -webkit-transform for a bit of help on that. I just think it would add that extra bit of polish to the app. Also, on the 'You Win' page, you should put a 'Play Again' button. I know you can just swipe a back gesture, but adding an actual button would be a bit nicer, especially if it eliminates a step. (Title->Game->Over->Title->... vs Title->Game->Over->Game) Also, keep in mind that your target audience is kids and they are not likely to know about the back gesture.
    I used Ares to do this. The cards are picture widgets. Will I have to wrap the widgets in a div to accomplish that? I can't even find the HTML which lays out the scene within ares.
  4. #4  
    I tested it on my Pre. But if you want to make it work better on Pixi, there are a few tips you can try. Basically, relatively position and size everything you can. In the case of your title screen, you could seperate out the logo into its own image doing something like:
    Code:
    HTML
    <div id='logo'><img src='../images/logo.png' /></div>
    
    CSS
    body.palm-default { background: url('../images/title-background.png') fixed bottom center; }
    #logo { width:100%; text-align: center; }
    That would allow your background to get clipped at the top, where there isn't any content and the logo would stay in the same spot on your screen.

    You could also, put a div around each card with something like:
    Code:
    HTML
    ...
    <div class='card'><img src='../images/cardX.png' /></div>
    ...
    
    CSS
    .card { background: url('../images/cardBack.png') top left; height: 20%; overflow:hidden; }
    .card > img { height: 100%; }
    Basically, in CSS if you set one dimension without setting another then the image will scale correctly automagically. You can get a bit more complex, but that should help you get started.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  5. #5  
    Quote Originally Posted by grizzly_addams View Post
    I used Ares to do this. The cards are picture widgets. Will I have to wrap the widgets in a div to accomplish that? I can't even find the HTML which lays out the scene within ares.
    Not necessarily. When you catch an event, you can get the element and setStyle like so.

    Code:
    MainAssistant.prototype = {
    ...
      yourTapHandler: function(event){
        var el = event.element();
        el.setStyle('width: 10px;');
      }
    ...
    }
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  6.    #6  
    like this?
    Attached Files Attached Files
  7. #7  
    Just emailed the attachment. I'll try it out and give some feedback where it seems applicable.

    -Gu1l7y
    "It is innocent, unless found Gu1l7y.
  8. #8  
    Very well done. Just one thing though. The notification bar overlaps the play button. Maybe just position it from the bottom instead of the top.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  9.    #9  
    Quote Originally Posted by unfairSurprisery View Post
    Very well done. Just one thing though. The notification bar overlaps the play button. Maybe just position it from the bottom instead of the top.
    Yeah a friend reminded me of that while testing. I am far from done. Just wanted to make sure my logic for the game itself was working well before I add all the polish. My 3 year old found a bug this morning I need to fix.

    Also, Is there a way I can push the Win scene from the Game scene while removing the Game scene from the stack? Right now I am popping the Game scene with a variable to the Main scene to push the Win scene, but it seems hackish.
    Last edited by grizzly_addams; 08/08/2010 at 12:59 PM.
  10. #10  
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  11. #11  
    This is what I love about webos. Everyone helping everyone for the good of everyone. I'm downloading it now.
  12.    #12  
    Quote Originally Posted by unfairSurprisery View Post
    Not necessarily. When you catch an event, you can get the element and setStyle like so.

    Code:
    MainAssistant.prototype = {
    ...
      yourTapHandler: function(event){
        var el = event.element();
        el.setStyle('width: 10px;');
      }
    ...
    }
    I've found that using el.setStyle... will change the properties of the picture itself, but not it's parent div.

    I had to use el.parentNode.setStyle to manipulate the container otherwise rotating or scaling a picture would cause it to be cropped within its parent div.
  13. #13  
    that's what I was talking about. getting the image, not a parent div. oh, and you should be able to use Prototype's simple DOM traversing methods. such as el.up().setStyle() would be the same as your code, or if, for instance, you had a div with multiple elements inside it you could use yourdivhandle.down().next() to get to the second element inside your div.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  14. jurias's Avatar
    Posts
    159 Posts
    Global Posts
    161 Global Posts
    #14  
    you guys are an awesome community...
  15. #15  
    i'm pretty impressed

    not a hello kitty fan or anything, but the game is pretty polished, especially the card flipping
  16. #16  
    nice one... If my daughter were half year older she would love it... Right now Im still afraid every time she touches my PRE (she is 2,5 years old) :-)

Posting Permissions