Learning Phaser 2.6.2 and Associated Hiccups
I found I can use Python’s SimpleHTTPServer module for development, which save me a little trouble. Python, I’ll always be true to you. <3
I am now working off of this base template:
I initially had problems developing with Firefox. The game is sluggish and I had issues with tilemaps rendering properly. Switching to a fresh profile on Chrome helped. You can debug using the developer console. I learned that if I should be seeing a change, but I’m not, I probably need to dump the cache/history.
My first goal is to build a basic tilemap with a character that can wander the map and trigger links to other pages or sites.
Phaser and Tiled: Maps, Objects, Collisions
It took me longer to sort out using Tiled tile and object maps than I’d care to admit, but most of that is user error. I spent hours puzzling over importing object layers before I realized I was confusing the object ID, which is listed in the Tiled editor, with the GID, which is apparently only listed in the JSON. Placing objects by hand isn’t a reasonable solution so I knew I had to figure that part out before I did anything else. I had issues with my character “jumping” and continuing on into outer space until I realized I’d left an old up.isDown check in there from when I was messing with a top-down layout.
The Phaser example library has been useful, as is the documentation. Tutorials scattered around the Internet have been hit and miss, in part because several are outdated or use shortcuts instead of the baked-in commands, which is confusing to a new user. IIRC in every instance I ended up going back to the example library for the cleanest example.
I now have a basic framework where a critter (who looks a little like the NeoCities’ mascot) can walk and jump on a wrapped map. If the player presses UP in a doorway the browser opens the assigned url, which is set in Tiled (the nice object scaling is thanks to this user kindly sharing their solution, but in my case I set the position and then scale up the objects). I tried to keep this as simple and readable as possible. The HTML is the same as the base I posted above.
You will notice a big issue–slope collision. I learned that this is the result of Phaser’s arcade physics, which treats everything as a square or rectangle. We need Ninja Physics, which is complex enough to reserve for the next version.
Gimp has a very handy sprite sheet plugin that allows you to easily create a sprite sheet from layers. Right now our critter only has a walking animation, but next time I’ll add pzUH’s jump and fall frames so it looks nicer.
Brief aside, one of my favorite things in the world right now is to be working on a game while Bookworm is playing with toys in my office floor, the more underfoot the better. I just like having my little buddy around.
Version 2: Extended animation, slope physics, pixel-perfect scaling
Extending our critter’s animations is easy.
If moving on the ground, we walk. If the spacebar is pressed, we jump. If our y velocity is over 0 and we’re not on the ground, we’re falling. This is my second platformer-type-thingie so I have already sorted out some platformer logic.
Now, about Ninja physics… it turns out Ninja physics are currently depreciated because people didn’t use the feature. After reviewing the options, I feel that using the arcade slopes plugin is the best way to enable slope physics. I usually try not to rely heavily on other people’s code (that I don’t understand) in the learning phase, but this plugin fills a distinct gap and I would be surprised if it wasn’t incorporated into a later version of Phaser. For simplicity’s sake, I recommend using a ninja physics debug sheet on your collision layer. There is a bug workaround and slopes need to be enabled in a certain order–see my notes in the code. With arcade slopes enabled you’ll have to tweak gravity and any jump velocities, otherwise your critter will fly up into the air whenever it hits a slope.
The game actually looks a bit better with 16px scaled up 3 times, but for now we’ll stick with 2.
Of note, I am not sure what sort of ancient dark magic is used to generate the GID for Object layers, but mine changed whenever I saved the map under a different name. If my objects all disappeared, it was because the GID was different.
With this version we have a basic platformer template.
Version 3: Text & Tweens
It would be nice if our critter could read signs and maybe even talk to other critters. For signs, I utilized a popup with an easing animation. These transitioning animations are called tweens. Refactoring leads to a popup box sprite with a child text object that is closed by a timer. I could use this for dialogue, too, but I’ll need to incorporate pausing the game and key to continue.
Phaser can use Google webfonts and bitmap fonts, which can be generated online. We at Bless Industries have selected the bitmap approach for the Sneak Attack font.
I now have a basic working version of the game I wanted, which is an interactive sitemap/links page. It can and should be refactored. Beyond that, I might like to add neighbors eventually, but I doubt it will need to go much further.
Making tilesets is a lot of work and I’m not very good at it, so the finished product is dependent on the types of assets I can find. I like the little sprite critter I’m using but I would actually prefer something that better matches the tileset and the NeoCities cat (I could have sworn the cat was named somewhere on the main site but I can’t find it).