SnepShark

Slowly making dogress

22, just graduated!

🎲🎮💾ΘΔ‽

Play my strange games over on snepshark.itch.io!

Header by LiveNLove7


Homepage + more links
snepshark.neocities.org/
Website League
pleasetf.me/SnepShark

Osmose
@Osmose

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!


Osmose
@Osmose

I've been wanting to try out non-Google analytics for a while, and this seemed like a great opportunity given that Gatekid's involvement meant a much higher chance of interest vs the developer-focused tools I normally make. My goal with this project was development and Phaser practice rather than metrics, so this is more about the practice as well than the actual numbers.

I ended up going with Plausible because they're open source and have extremely reasonable data policies.

Integrating Plausible was straightforward and their documentation was excellent. Their dashboards are great too—from the developer experience side I'm a huge fan and will almost certainly continue using them on any personal projects that I want analytics for (which is rare, admittedly).

Where was RBG posted?

I announced RBG with posts on Cohost, Twitter, and Mastodon. On Twitter, my post was a quote retweet of Gatekid's original mockup video post, which he quote-retweeted in turn. I posted on Cohost during Omelasgate and reshared it the next morning, which is when it started getting attention.

The Cohost post above uses Chiframe to directly embed it in the post. The Twitter and Mastodon posts simply linked to the page but did not include a screenshot. The page has basic Open Graph tags to make the link embeds on those sites look decent, although the icon I used was just a logo.

Summary Metrics

The main interesting topline stats are 135 unique visitors and a 2 minute and 15 second average visit duration. I've never measured analytics on a game demo I've made before, only marketing pages or blog posts, so 2 minutes seems huge! But for a game demo that has about 1-4 minutes of content (depending on how much time you spend on the puzzle grid per turn) that's probably normal, actually.

Top Sources

Chiframe was by far the top source at 105 visitors, with Twitter following at 15 and and direct links at 13. Tumblr is on here because part of how Chiframe works involves a Tumblr domain; those 12 visitors can be counted with the Chiframe consent visitors.

I'm not surprised the lowest-friction method of seeing the game won. Twitter used to support embedded frames in Tweets if you added the right metadata to a page, but they've since limited that feature to an allowed set of domains, which is kinda prudent from a security perspective.

Devices

Android at 38.5% and Windows at 34.8% are the top 2 winners, with iOS at 19.3% and Mac at 7.4%.

I usually develop my Phaser games on a Macbook, including this one. It was keyboard-only controls and locked to 3x magnification until the last few days of development. I realized most people would probably be looking at the post on mobile and found to my delight that Phaser has pretty great support for adding mouse/touch control to an existing game and dealing with varying resolutions. The game itself is implemented as a bunch of state machines, so adding touch controls mostly consisted of adding additional touch/click events that triggered state transitions in the same way that keyboard handlers in the game's update loop did.

Custom Events

I added two custom events tracking when someone completed the demo, either by winning or by dying (which takes a while to do unless you use the lowhp dev flag. 38 unique users (28.1% conversion rate) won the battle, and 2 users (1.5% conversion rate) lost. I'm fairly sure one of the ones that lost is myself during testing.

I'm actually really surprised that over a quarter of everyone who looked at the demo stuck it out long enough to win. I'm used to marketing webpage or app registration conversion rates, which are significantly lower than 28% normally. That made me feel good! This might just be more normal for game-like things, though.

That only 2 people hit the death state is amusing to compare to the effort put in to make sure there was a gameover state, like party death animations, the game over music being a minor-key slowed-down version of the victory music, or certain channels of the background music being muted when a party member falls. Most of those are still something you might see in a victory run, though, and I'm not salty about "wasted" effort anyway since the metrics weren't the point.


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