Is KaiOS 3.0 Catching Up?

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.

My Top KaiOS Versions

  1. 3.1
  2. 2.5.3
  3. 2.5.4
  4. 3.0
  5. 2.5
  6. 2.5.1
  12. 2.5.2

Top Phones

Here are the most used phones in order of game cold launches.

  2. ALCATEL 4052R
  3. A405DL
  4. ALCATEL 4052W
  5. N139DL
  6. CKT U102AC
  7. TCL 4056S
  8. ATT EA211101
  9. ALCATEL 4056W
  10. TCL 4056SPP
  11. ALCATEL 4056Z
  12. TCL 4056W
  13. ALCATEL 4052Z
  14. TECNO T920D 4G
  15. Tecno T901
  16. Nokia 2720 V Flip
  17. ALCATEL 4052O
  18. ALCATEL 4052C
  19. Geo Phone T15 4G
  20. ATT U102AA
  21. Tech Pad Kaios One 3G
  22. Nokia 6300 4G
  23. Geo Phone T19 4G
  24. MS248 512 4G
  25. IPRO I324MS4
  26. TCL 4056L
  27. VIDA VIDA-K242 4G
  28. Digit Digit4GLite 4G
  29. M561M3
  30. Digit Digit4G-Bold 4G
  31. M562F3
  32. SIGMAMOBILE-S3500-3G
  33. Multilaser ZAPP
  34. BLU TankMega 3G
  35. Digit Digit4G-Power 4G
  36. Q Innovations-Q28A
  37. Hammer 5Smart 4G
  38. GEOPHONE T19I 4G
  40. Energizer E241S
  41. Telma Wikif Max 4G
  42. Accent Nubia50K
  43. Sanza-M560F3
  44. CAT B35
  45. iKU V400
  46. 3088X
  47. MS260 512 4G
  48. Telma Wi-Kif 3G 3G
  49. INOI Q28F02-3 3G
  50. MS247 512
  51. M571M3
  52. Positivo P70S
  53. M560M3
  54. Win F3 3G
  55. Vodacom Vibe4G
  56. Alcatel 3078 3G
  57. Nokia 8110 4G
  58. Orange it9301
  59. Nokia 8000 4G
  60. itel it9300
  61. Nokia 800 Tough
  62. Qmobile 4Gplus
  63. Digit Digit4G-Elite 4G
  65. VGO TEL Smart Hi-Fi 3G
  66. Nokia 2720 Flip
  67. LOGICOM LK284 4G
  68. Fise 32433 3G
  69. Digit Digit4G-Defender 4G
  70. ALPHA B10 4G
  71. WIKIFMAX4G 512 4G
  72. Digit Digit4G 4G
  73. Digit Digit4G-Music 4G
  74. Symphony PD1 4G 4G
  75. AZUMI L4K 4G
  76. myPhone UP Smart LTE 4G
  77. itel it9200 4G

Custom GameMaker HTML5 Loader

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.

Loading Bar

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.

GIF of a custom loading screen for Game Maker HTML5 export.  Has an beating animating SVG of the star heart Taara Games logo in the center with a red progress bar at the bottom of the screen.

What's happening

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>
          <div class="loader">
            <div class="taara_logo">
              <div><img src="./html5game/taara-logo-solo.svg" alt="" /></div>
            <div class="progress-bar"></div>
            <p class="bold_text" id="load_info">LOADING</p>
        <div class="ad"></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.