Introduction
Open source arcade game with Hive blockchain support. Read the bottom about section for more information.
From the boot to the gameplay
One of the main points on the todo list has been to create a whole new interface for the game. The old version had a thrown-in-there type of ingame interface that did not do too well with adjusting to different screens and devices. Last week's work was concentrated on replacing this with a new interface written in Preact and Bulma, giving it all a fully responsive behavior and easy navigation. To make it a traditional gaming crushing combo, Animate.css was used to animate menu interactions.
I find that these three go very well together. Preact contains all the functionality into small components. Bulma takes care of the styling, where you do most configuration of it in scss files and reference them in Preact. Animate.css works the same way, if not even easier, just check their site for a nice animation and use the class in Preact. Toggling the classes on/off makes the animation magic happen.
User experience and functionality was also part of the process. For example, game saves and loads settings, on Android the back button can be used to navigate the menus and icons/boot art should be properly used on all/most devices and situations.
Lets take a look at the changes!
As the game starts, it will show animated dots on a black background while loading the initial scripts and content. This is pure text to be able to do it as soon as possible.
Proper loading screen as soon as PixiJS is ready and loading the game content. When content finished loading, the user can click/touch to continue to the main menu. Interaction is required to start playing sounds in a browser, so this also hides the need to get that interaction for playing the menu music.
Now properly scales and adjusts to everything from large computer screens to small mobile phone screens.
All settings will be saved and loaded, with limitations to where you play the game. For example, in a browser you can not script a fullscreen without user interaction, the browser version needs the user to activate it manually each time.
Added a burger menu in the top right, click/touch to bring up the menu and pausing the game. Also possible to use M key.
There was time for performance improvements as well. Lots and lots of stars to collect.
That's about it. To see it in action, you can always try the game!
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
Great progress! Try increasing the transparecy on the stars. Too much white might be making it harder to navigate.
Thanks for feedback! For clarity, did you test the game or is it based on looking at the gif/images? Asking because the stars are brighter in the gif/images than they are in game, so good to know the how much to changed based on the reference.
At the gif images. Hmm, maybe make the player stand out a bit more just in case? Worth testing?
I think there are 20 000 stars in the gif, but the plan is to have 3000 or so at most, making it less cluttered. It will look more like the last static image. But I will try with a solid player instead of outline. Thanks!
Remember me pacman hehe nice work