Osmose

I make websites and chiptunes!

  • he/him

AKAs:
Lapsed Neurotypical
JavaScript's Strongest Warrior
Fake Podcast Host
Unofficial member of the Portland Tourism Board
The Webmaster
Thotleader
Vertically Integrated Boyfriend
Your Fave's Mutual
Classically Trained Web Developer
Mentally and Physically Augmented
Currently Attempting to Fix Her



Half a year ago @gatekid3 posted a mockup video to Twitter of a role-playing game with tile-matching mechanics. I thought it was a cool idea, and Gate is an incredible animator so it looked gorgeous.

So I decided to make it a functional demo for fun:

https://www.mkelly.me/RBG/

The code is open source and available on Github. @gatekid3 made all the art/animations and music, I handled all the coding and a few misc animations/sounds kitbashed from the existing art.

Check it out and let us know what you think!


You must log in to comment.

in reply to @Osmose's post:

Also, one note is that we decided not to iterate on the game design itself much. My goal was to practice making Phaser games rather than refine the game design into something super compelling, hence why it's a demo.

Also also, there's a dev flag that sets everyone's health to 1 if you wanna see the victory/game over states and animations easily: https://www.mkelly.me/RBG/?lowhp

what has your experience been using phaser? what does it provide?

i mostly build dumb stuff for which the raw canvas api is sufficient but interested in the option to do more advanced stuff

I really enjoy Phaser and have been using it for years, although not professionally or on projects with urgency or large requirements.

It has a lot of stuff compared to raw canvas, way more than I could list, but some highlights would be:

  • It handles the game loop, variable FPS, loading assets, timing events, etc. A lot of the busy work of writing a game that wants an update loop instead of an event-based model like websites default to.
  • Drawing is stateful—if you want to draw a sprite, instead of writing a draw call that runs every frame, you create a "sprite" game object with a position, rotation, alpha, tint, etc. and Phaser will draw it every frame for you.
  • It has multiple physics engine options integrated with these game objects available out of the box.
  • It has a ton of different game objects or abstractions that are typically useful for a game, like tilemaps (isometric, orthogonal, hex, staggered), bitmap fonts, particle emitters, tweens, etc.
  • Notably, it does 2d stuff like the game above using WebGL without you having to know anything about it, which lets you leverage GPU-bound perf improvements. It can do 3d games as well, though I've not touched that part much.

I think the only time I'd consider not using Phaser for a web-based game would be either if I want to use something like Godot or Unity to export a big complex 3d game to the web, or if the game I was making was well-suited to an event-based programming model and could be made using mostly DOM-based graphics.

Also while it was a little confusing to figure out the boilerplate from the docs at first, it's actually a pretty small amount of work to get started with it. I made a Glitch starter project a while back that you can remix to get something running to mess around with immediately: https://glitch.com/~phaser-vite-starter

We thought about a time limit or move limit but IMO that would feel too restrictive for a demo without refining the rest of the design, like making the stocked sphere counts do more than just boost damage. I didn't wanna do that much work and it turns out it's more fun to just chill and move spheres around if you're not making a full game anyway lol