I quietly launched LittleGames.app today.
It's a simple site that acts as a lunching point for my PWA games.
There might be a few bugs on each PWA since I'm trying different things.
Cowabunga and Bubble Bee were rewritten in GameMaker and exported as HTML5.
Debris Field is the Aerolite re-make done in Phaser and TypeScript.
I haven't checked it in a few months but I'm happy to see that KaiOS 3 is at the top of my games launched list for the month of June. Also surprising since I only have one game live on KaiOS 3. Maybe there is a lack of apps on version 3?
However, this does not correlate to how many actual phones there are in the wild. Only how many times games were cold launched on that version of the OS.
This could mean that a user is loading a game multiple times a day since I only tally the OS count when the app is launched.
This list only shows phones and OS versions from 2022/06/01 - 2022/02/13.
Here are the most used phones in order of game cold launches.
I love making games for the web. I've been doing that since the mid to late 90s. Basically ever since Shockwave. For the past, I don't know, 8 years maybe, I've been using Phaser. Now I'd like to try something different and use GameMaker.
My brain really likes the compartmentalization of GameMaker's IDE. It reminds me of the time I used to make games in Director. It's pretty fun and it exports to almost everything! I've been playing on and off with it's HTML5 export option.
As far the HTML5 export, it's ok. I've discovered a bunch of issues and I was porting games but they've fixed the things I sent in bug reports for. So far I'm content even though it can take 2 months to, maybe, get a fix. 😔 Nothing beats open source where you can fix it yourself.
The one thing I don't like is their default loading bar. It's does the trick but it's generic. If you want something that matches you style you have to build it yourself.
I found a couple of tutorials on how on GML loading bars but I couldn't get it to work properly when I scaled the game. Plus, I also wanted something more robust.
So I decided to try and give it shot.
This is what I ended up with.
It doesn't use a canvas for the loading animation or bar. The loader div that contains the logo, loading bar and text is positioned relatively within the gm4html5_div_class class.
The Taara Games star heart logo is a CSS animated SVG also position relatively and centered using flex box within the loader div.
The progress-bar div is just a simple div with a red background color and a height of 15px. It's width and percent loaded are calculated with every call to the loadingbar_hook callback function in the loading extension.
<div class="stage">
<div class="gm4html5_div_class" id="gm4html5_div_id">
<!-- Create the canvas element the game draws to -->
<canvas id="canvas" width="1280" height="720">
<p>Your browser doesn't support HTML5 canvas.</p>
</canvas>
<div class="loader">
<div class="taara_logo">
<div><img src="./html5game/taara-logo-solo.svg" alt="" /></div>
</div>
<div class="progress-bar"></div>
<p class="bold_text" id="load_info">LOADING</p>
</div>
</div>
<div class="ad"></div>
</div>
The great thing about this implementation is that you can use almost anything as your loading animation and progress bar. Basically anything HTML supports.
In this example the loader div is transparent and lives on top of the canvas div. It only shows a logo and progress bar. The "Taara.Games" text on the yellow background is actually the first room in Game Maker.
The Game Maker canvas is also fully scalable and fits neatly into any size div.