Introduction
Open source mashup of classic arcade games with Hive blockchain support. Read the bottom about section for more information.
Crafting a palette
In Hive P v. S almost all of the art comes in the color of white, or shades of grey. They are all created as SVG files and using TexturePacker combined into a 512x512 texture that you can see below.
By doing all the art in white, it is possible to tint the sprites to different colors using code. It has so far been done by assigning color values in hex to the sprites and converting hex values to RGB for particles. Thanks to PixiJS converting a hex value to RGB is as easy as doing "PIXI.utils.hex2rgb(hexValue)". Even so, it has been unnecessary to do that conversion and the assignment of colors has been somewhat unstructured.
The main focus this week has been to create a set of colors to use in the game and a class to make assigning them as smooth as possible.
In Inkscape a list of 32 colors was created and saved as a SVG file.
A short javascript, using get-svg-colors, reads the SVG file and makes a list of objects containing each color in hex and RGB values. This list is then saved as a JSON file.
const getColors = require("get-svg-colors");
const colors = getColors("work_files/textures/palette.svg");
const fs = require("fs");
let palette = {};
palette.hex = {};
palette.rgb = {};
colors.fills.forEach(color => {
let key = color.hex();
palette.hex[key] = color.num();
palette.rgb[key] = { r: color._rgb[0], g: color._rgb[1], b: color._rgb[2] };
});
fs.writeFileSync("src/assets/game/textures/palette.json",
JSON.stringify(palette, null, 4)
, (error) => {
if (error) console.error(`
Failed to create palette.
`);
}
);
The JSON file is used by the new color class to configure color values for different types of objects. The class contains some color helpers and also uses the JSON file to create code hinting and type safety for when other files uses the colors.
// Player assigning its color and the rest is taken care of by setColor.
this.setColor(this.world.color.player);
// An object assigning a random color from the friendScared color set.
this.setRandColor(RandColor.friend);
After pointing all the old color code to the new class, making color changes got very swift. Update the SVG color file and update the color class with the color you want to use and it is updated throughout the game. This could be automated one step further, by using something consistent as keys, and then only updating the SVG file would be enough. But, as it is fast enough and the project is small, no need to overdo it!
To end this weekly update, here is a short gif of the updated game using the new 32 color palette. Of course, you can always try the game yourself.
Thanks for reading!
About
Hive P v. S is a mashup of classic arcade games. You fly around collecting stars, each star collected spawn an entity that forms a tail that gets longer and longer. Avoid the tail for as long as possible until you get a power up that gives you a limited time to destroy the tail. If successful you'll get bonus points and new stars are spawned. Rinse and repeat.
When the final score is high enough, you'll get the opportunity to submit the score to the high score table. The high score table is saved on Hive and is viewable on Hive as well as in-game for all users.
Game will be released for browsers, as a PWA and as native builds for mobile and computer platforms.
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 build of Hive P v. S
Try the latest development build of Purple & Eye
well that was a fun few minutes spent. ^>^ nice game
Thank you
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 yourself to others in 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: