onaluf / gameQuery

a javascript game engine with jQuery
http://gamequeryjs.com
633 stars 161 forks source link

tileset #6

Closed hososugi closed 12 years ago

hososugi commented 13 years ago

I'm trying to use the tileset function in gameQuery, but there aren't any real examples. When I do it, I don't have any errors, but nothing is being drawn to the screen. The sprites are all drawn, but no tiles.

In my code I have: ... var background0 = new $.gameQuery.Animation({imageURL: "./image.png"});

... $.playground() .addTilemap("myTilemap", new Array(0,1,2,3,3,2,1,3,0), new
Array(background0,background1,background2,background3), {width: 32, height: 32, sizex: 3, sizey: 3, posx: 0}).end() .addGroup("background", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end() ...

I wasn't really sure about the tileDescription, but I figured this would be fine.

FostUK commented 13 years ago

Tiledef is a 2d array so you can use:

var tiledef = [ [1,2,3], [4,5,6], [7,8,9] ]; //use 0 to display no tile.

The integer is an index into an animation. Most people will want to set up large set of non-animating tiles. This is the bit that took me a while to get when using a multi animation to select tiles from a sprite sheet you need to set it up in the following way (single frame, multiple animations, once sprite sheet, no looping)

Using a horizontal strip of 50 tiles each 32X32 pixels

var multiAnimation = new $.gameQuery.Animation
                         ({
                            imageURL: "/graphic/temp/Ground1.png",
                            type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_MULTI | $.gameQuery.ANIMATION_ONCE,
                            numberOfFrame: 1,
                            delta: 32,
                            distance: 32, 
                            rate: 30
                          });

var tiledef = [[1,2,3,4,5,6,7,8,9,10],[11,12,13,14,15,16,17,18,19,20]];

$.playground().addTilemap
(
    "myTilemap",
    tiledef,
    multiAnimation,
    {width: 32, height: 32, sizex: 10, sizey: 10, posx: 0}
);

$.playground().startGame();
hososugi commented 13 years ago

After I posted this I just used PHP to just make a nested loop to accomplish basically the same thing, but it was making my game slow, so I tried just making one large bmp for the background and it's much faster. I haven't compared actual frame rates though. Have you tried comparing them?

FostUK commented 13 years ago

Haven't done any benchmarking but it would make perfect sense that moving around lots of small divs would slow down the system a lot. I guess these days a really large jpeg isn't going to do much harm. Perhaps once the optimisation for off playground tiles is in it will be worth benchmarking though. There's clearly some design advantages for some types of games by using tiles.

onaluf commented 12 years ago

One advantage of tilemap is that you can use collision detection to find out what kind of tile a sprite is touching. That's very convenient for a platformer for example. When the tiles are animated on the visible one get updated this make the use of quite large animated tilemap quite fast, for very large map there should be a solution comming to gQ 0.7.