Brutal Ice will be my very first (usable) public game.
Remake of the NES Classic "Blades of Steel" in Pixi.JS with NodeJS/Express/Socket.IO multiplayer engine. Beta will be available soon at https://ryanfleck.github.io/experiments/brutal-ice. Read more about why this game is great at https://arstechnica.com/gaming/2010/11/masterpiece-blades-of-steel/
Render dimensions have been set to reflect the constraints of the NES: 256 x 240
.
(Looks like web-packed Pixi.JS is >1.4 mb! Beware loading on mobile phones.)
To run on local machine:
- Clone or download repo.
npm i -g http-server
npm i
(wait)npm run build
- Open a terminal in the project dir and run
http-server
. - Browse to
localhost:8080
and the game will run.
Resources:
- Lots of best practices and initial setup => https://github.com/kittykatattack/learningPixi#settingup
- Object with multiple animations => http://www.html5gamedevs.com/topic/2393-creating-an-object-with-multiple-animations-in-pixijs/
In this screenshot of BOS, it can be seen that the player sprites are simply y-mirrored and exist facing five directions: up, up-right, right, down-right, down. These, plus stick-up variants and two celebratory poses, means ten sprites to create.
Image probaby copyright Konami
The stick takes on the primary player color, and skates secondary.
Step one was getting a background. I stitched a bunch of BOS screenshots together to make this:
And then spent a silly amount of time to clean it up and make this, my backdrop:
Also important was removing all the components players could appear in front of, and making some improvements to the classsic rink (transparency).
Next step was producing the spritesheet. I spent a while watching players at 6% emulation speed to get this:
Testing a new workflow based on https://github.com/gluckgames/pixi-packer.
Relies on GraphicsMagick. Stack overflow thread for WinX64 development.
Pixi-packer didn't work out. Using https://www.codeandweb.com/free-sprite-sheet-packer
- Z-Order https://pixijs.io/examples/#/layers/zorder.js
- NormalMap https://pixijs.io/examples/#/layers/normals.js
- Spine https://pixijs.io/examples/#/spine/goblins.js
- Drag/NormalMap https://pixijs.io/examples/#/layers/normals-drag.js
Added basic full-rink camera panning.
Amazing gamepad testing tool here => http://html5gamepad.com/
Will add this soon.