Tilemaps (and migrating from Impact)

[drhayes]

Hey there! I just discovered PandaJS after using Impact for a very long time and it looks really great. I'm super excited about WebGL and learning how to make my own shaders, especially. Sorry for the long post!

 

I'm working on a pixel art Metroidvania (who isn't?) that makes extensive use of Impact tilemaps. I notice there's no 1-1 correspondence in Panda, but I've seen in a couple of demos that you can set up a body that collides that acts as a platform; is that the way to do it?

 

If so, I'm assuming we should optimize our maps so we don't have a lot of e.g. 16x16 rectangles that can all collide. It seems like it would be better to make a big rectangle for the "main" part of the floor and smaller rectangle bodies for smaller platforms. Or am I missing something?

 

I haven't had a chance to set up and play with Bamboo yet; does it provide other options?

 

When I played around with Phaser a couple of months back, Chrome had this issue where a WebGL-enabled canvas would do bilinear filtering instead of nearest neighbor. It made scaled up pixel art looks really blurry. The Phaser people didn't think it was fixable. Is this: http://www.html5gamedevs.com/topic/3108-resize-screen-in-pixel-art-pixijs/ the solution I'm looking for in Panda-land?

 

It looks like there aren't entities per se in Panda like there are in Impact. However, I can define a class that has both a sprite (for drawing) and a body (for updating with physics) and track'em both? That also sort of gives me the offset capability from Impact, right? http://impactjs.com/documentation/class-reference/entity#offset-x-offset-y That means I can have a sprite that exceeds the bounds of the body pretty easily, if I understand correctly?

 

Also, do "scenes" in Panda provide the equivalent solution as "games" in Impact? For instance, if I had a menu/options/new game screen in Impact I might implement it as an entirely separate game and switch to it using http://impactjs.com/documentation/class-reference/system#setgame. Same thing with scenes here, more or less?

[PixelPicoSean]

Welcome to panda.js community, glad to see another impact.js user

 

Tilemap is on the roadmap for a while but no one is working on it recently, mainly because enpu is working on his own games and does not have much time for it. There's some posts about "how to implement tilemap with pixi" already, you can check them out and maybe make your own. The phaser way of do it is drawing tiles onto a 2D canvas and then use it as texture of a sprite (every TilemapLayer is a sprite). I was working on a simple implementation days ago but dont have much time for now since lots of work need to be done for my next game (Plan to release it next week).

 

Here's some useful links: 

https://github.com/grapefruitjs/grapefruit/blob/master/src/tilemap/Tilelayer.js

http://www.html5gamedevs.com/topic/3208-pixi-performance-tile-maps-canvas-and-rendertexture/

http://www.bhopkins.net/2014/10/08/draggable-zoomable-tile-map-with-pixi-js/

http://www.html5gamedevs.com/topic/1706-basic-tiled-game-performance-enhancement/

 

For pixel art friendly scale, simple add this to your `config.js`

system: {    scaleMode: 'NEAREST'}

And for entities, yep that's the panda way of doing it.

Also "panda scene" is almost like "impact game"

[drhayes]

Awesome! Thanks for your reply and the tons (and tons!) of info in those links. I haven't messed around with Pixi at all. I didn't realize it's actually kind of straightforward like this.

 

enpu, I don't see any tilemaps branches or anything. ( = Are there plans for this written down somewhere? I'm totally willing to help if you can stomach a gajillion questions along the way.

 

What would be involved in coding this? Seems like there are two pieces: the "right" way to do the Pixi sprites for the tiles and the physics colliders. Those links pretty well cover the Pixi side of things (and they are really great, thank you very much!). What about the physics side?

 

Is it really about making rectangular (or linear) bodies and adding them to the World? Could an editor help with that? It looks pretty straightforward to add a bunch of mass-less, static bodies to collision. It looks like collision groups lets you get away with what in other engines they use a static hash for (nice!). Without making too many bodies I don't see a tilemap causing more problems, just another collision group, right?

[enpu]

Hey!

 

I just started to work on Tiled (http://www.mapeditor.org/) plugin:

https://github.com/ekelokorpi/panda.js-plugins/tree/master/tiled

 

Just pushed first version.

[drhayes]

Doubly awesome! Thanks enpu. I'll keep an eye out.

[PixelPicoSean]

Thanks enpu, you're crazy fast. I'm going to help.