Hazard's Home

A home for Hazardous thoughts

Chopping Wood: Snake With Pixi.js
posted -

Skip to the game

One of my very first programming experiences was in high-school when my friend Sam taught me a little javascript and html canvas to do simple animations. Oh how times have changed. I can still remember a conversation where a friend was enthusiastically trying to explain to me what a for loop was, and I was failing to see why this could possibly be useful. Now I [insert bragging about current coding skills].

This past winter I made a large 2-d scroller in HTML canvas. The graphics for the game are completely done with the drawing api that canvas gives you. Pretty quickly, I realized it was going to be impossible to make whole worlds, so I thought deeply until I remembered that nothing is sacred all is bits and used google sheets as a level editor. This turned the problem from impossible to merely a pain in the ass. I made working worlds, and yet the primitiveness of my tools still shown through. When you're manually redrawing every image every clock tick, anything remotely complex (i.e. arches) makes your animation really slow. I powered through, made my game, but knew that if I wanted to make any web based games in the future I was going to have to find a better paradigm.

Enter pixi.js.

Meh, I don't really have a ton of high praise for it. It does the job I need it to. I took it for a test run and made this very pleasing snake demo. I also put together a template that should speed up the process of putting a pixi.js game on this website.

The basic gist seems to be that pixi.js uses WebGL to get your GPU involved in rendering the sprites you want displayed. The basic structure that I that you'd need to do 2d stuff (what I plan to use) isn't that different from canvas, so you if that was your shtick you shouldn't feel too out of place in pixi.