Introduction
Open source arcade game with Hive blockchain support. Read the bottom about section for more information. Onto this weeks report. After two weeks of getting it all up and running, it seemed like a good idea to check the performance and swipe the floor from a mess of old code.
Make it go faster!
Two weeks ago I borrowed the Raspberry Pi from the oldest kid to see how the game was performing. Not too good, at least not compared to how well Zteem.io ran on it! Hive P v. S gave about 15 FPS, while Zteem.io ran at 50+ FPS. Granted that, if you test the two games by following the links, you will hopefully agree that one looks a bit better than the other...
Using the developer performance tools in the browser it was obvious that it was mainly the graphics that was demanding, almost nothing else would report using much time to process. As I had some fullscreen alpha using effects and in general all art having alpha, it was a good place to start looking at for improvements.
I had used a div with CSS styling to create the interlaced "arcade screeen"-effect. By changing this to be within the PixiJS driven game world, I got an almost 10 FPS boost. I did keep the CSS version to be able to toggle it on/off for when in the menus. A future version of the game will have all menus created with regular HTML/CSS, they will need this effect as they are drawn above the actual game.
The next step was to do a quick test of making the sprite sheet into an image format that did not have an alpha. For example, all the tiny stars (2000 of them for testing) in the game are 8x8 pixels each, but only about half of those pixels are actually used, the rest are transparent. Surprisingly this test did not show that much of an improvement when all art was solid! I decided to not worry too much about it, I did change some of the art, but more because it got less cluttered on the screen when they had solid bodies.
Third step was to go over all the particles created the week before. As few particles as possible and as small as possible for the best effect. My best tip to use less particles, while keeping the appearance the same, is to change the fade in/out of particles. Instead of using linear fades, rather expose as much of the particle at full opacity as possible for its lifetime with quick fades in/out. The particle changes and the previous texture tweaking, gave at most a combined improvement of 5 FPS, more likely less.
The last major art change was to change the text drawing. By creating bitmap fonts and use them for drawing the text, even a minor thing as "Score: X" during gameplay, gave an almost 10 FPS improvement. By luck a new tool for generating bitmap fonts was released recently, making this a perfect time to try it out. Very happy with how well it worked, if you ever want to generate some bitmaps, make sure to use https://www.npmjs.com/package/@rtpa/phaser-bitmapfont-generator. It outputs BMFont compatible files, so despite the name it works for more than just Phaser.
As for the code, some obvious things could be improved to get a slight further boost. For example, the game has a grid for the world, where each cell will take charge of the objects in it. This makes it easier to turn things on/off by only checking if the cells are on screen or not, which objects to compare against for collisions and so on. But if an object is on the edge of a cell, it will be in two cells and that means almost double the work. In worst case an object can even be in 4 cells. Again taking the stars as an example, they were randomly spawned across the world, making it likely they would be on borders of cells. About 10-15% of them it turned out to be when printing debug info for it! A quick optimization was to make sure they were spawned in single cell locations instead. Stars and other items also ran continuous collision checks, even if there was no dynamic object in the cell. A bit of a waste doing this when there is no possible collision to be found!
All in all this made the game go from those 15 FPS to about 40 FPS. Good enough for now!
The plan was to continue write about code cleanup, event triggers, proper states and all other improvements done, but this feels far enough for now. That's what you get for skipping a week's progress report!
Thank you for reading, keep buzzing.
About
Previously called Zteem.io and utilized the Steem blockchain to store a high score list. See the original Zteem.io announcement for further details.
Rebooted the project as Hive P v. S to add Hive support and to develop an actual game out of what was a concept demonstration. Game is getting proper graphics and audio, structured gameplay with progression and hopefully a more engaging experience as a whole. While Zteem.io utilized user blog posts to keep track of the high score list, the plan is to make Hive P v. S store the data to the blockchain on its own, making it hassle free to play the game and get the high score saved. It will be optional to post the "reached the high score list brag"-message to own blog/community.
Game has been wrapped into a project that makes it possible to create releases for browsers, PWAs and native builds for mobile platforms as well as computers.
Check out the following links to get a closer look at the progress!
Project links: GitHub, website and playable build.
Game development using web technologies.
Try the latest development build of Hive P v. S
Try the latest development build of Purple & Eye
That black hole effect is so awesome 😱
I noticed that after you die once the next match all the nice sounds of pick up go away, just the death effect remain
Thanks! Thinking it turned out quite nice myself as well 🤗
Thank you for letting me know, currently working with the sounds and workflow of getting sounds from audio application to in game in a smoother manner .
Niceee
Thanks!
Congratulations @smjn! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
You can view your badges on your board And compare to others on the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPDo not miss the last post from @hivebuzz: