glixl, pyxel and pixels

I had a long period off over the summer, then, after I went back to work, I was busily doing things that were barely even worth doing in the first place, let alone writing about. By which time I was well out of the habit of writing at all.

Most recently, I have been working on my OpenGL-based pixel engine, in the form of my test game RPG which is playable here.

I did quite a lot to it, including adding (slightly rubbish) lights and finally got the whole ‘depth’ thing working properly (please, no-one ever go back and look at how I did it previously). I also reworked the framework itself, making some changes to the way you actually go about making games; making much better use of javascript classes and namespaces and whatever.

Prior to these updates, I tried my hand at porting the whole thing to Python3! Which met with some success, including a TK-based canvas version, before seeing sense and moving to OpenGL. It all came crashing down following a single throwaway comment given after I showed someone. They pointed out that the application icon was missing (of which I was aware of course). “No matter” I thought, I’m sure it’s easy to change it.

It wasn’t, and thus followed about 3 days of trying to install various python GUI frameworks, all of which appeared to have a dependency list longer than my framework code so dead were any hopes of ever actually distributing my games to anyone normal.

And so I returned to the warm embrace of WebGL and Javascript.

I much prefer programming in Python, but I get quickly frustrated with how difficult installing simple packages can be, dashing all hope of distribution. I know that various py2exe type things exist, but they won’t help with the issue where pyOpenGL installed without any dlls on my Windows machine, forcing me to copy them across manually and so on and so forth.

I have also begun a fools quest to build my own mechanical keyboard. Pray for my soul.


This week I’ve been very busy at my job, so not much time for creative endeavours.

I tried out some new characters for RPG:

New Characters

They’re a different style and larger than I usually do, but 16x16 was starting to get a bit too limiting. I quite like this style, although I’m not sure how well it fits with my game. I got the inspiration from a post on PixelJoint, which just has some beautiful art in it.

I definitely felt the limitation of the palette too, which is a shame because I put a lot of effort into making it. I think I need to expand it to give me more shading/detail options. I even read some things that suggest you should use different palettes for tiles/characters to make the characters stand out more. Makes sense, but I’m not sure. I know I have to use black outlines on my sprites so they stand out against the tiles. I think I need to experiment a little more.

I’m also not at all happy about the shoulders. Practice, practice, practice.

Object Lesson


This week in RPG I refactored the movement code from last week, creating 2 classes - one for Mobs and one for the Player. The Player class has no special functionality at all beyond what it inherits from the Mob yet. This gave me an opportunity to revisit some code I wrote a long time ago. When I knew nothing about javascript, I had some Mob and Player classes but the inheritance was borked. Back then, I solved this by simply copy-and-pasting the constructor from Mob into Player. Now I know better. I’ve seen extend() functions during my brief flirtation with javascript frameworks in the past, but I didn’t really understand what was going on or where they came from. Now I do!

Once I had things refactored and nice and neat, I made the Orc a Mob and gave him some very rudimentary intelligence. If you get too close, he’ll chase you! So awesome.

Next up I need to implement some special generator tiles that you can click on to ‘harvest’. Probably need some kind of inventory too, which is a whole other kettle of fish.

I also ended up spelunking in the rabbit hole of creating some lighting effects. I realised that any self-respecting RPG/survival horror game needs a day/night cycle.

I was able to make night, with a pretty simple change to the fragment shader, although actually passing the value in from javascript is a little more involved. creating independent light sources looks a little trickier though.

This spelunking also lead me to realise that I made a pretty stupid and large mistake with my depth code. I wrote some fairly funky-gymnastics-type-code in order to render different levels of the tilemap in a different order. What I realised is that I’m working with a graphics system designed for 3D rendering. All I really need to do is stop rendering everything at the same z-coordinate (I wanted it flat!!!), and the ‘3d-ness’ will take care of itself!

I wrote the original code for glixl over a year ago now, so I’ve forgotten most of what I learnt about WebGL. I’ll have a stab at re-writing things when I get some time to myself.

Pixel Art

I didn’t do any pixelling this week as I ended up quite busy. I did however justify all the time I spent on my little band when I came up with a great 1-shot lesson for a year 7 group I have using Scratch to create little bands and animate them.

I’ve noticed that this happens quite a lot - I play around with something interesting and after a couple of weeks it seeps into my teaching, making my lessons more fun.

At least, that’s how I’ll justify my procrastination when the OFSTED Inquisitors come knocking…


I found my way back to the gym this week for some swimming. Aren’t I a good boy.

Found a path


RPG This week I actually plummed in path finding. The code is a bit hacky at the moment though. Movement is now achieved by clicking in places on the map.

I squashed a couple of related bugs in Glixl too: pathfinding wasn’t properly excluding collidable tiles and the mouse position wasn’t being calculated properly when the page was scrollable. I haven’t pushed these changes up to the Glixl repo yet though, they’re still just in the RPG repo at the moment. I haven’t quite worked out how to manage projects that contain other projects that are developed together. I should probably get on that.

Pixel Art

I started working on some pixel art:

The Pxls

I still need to make a keyboardist and drummer and the lights need a lot of work. I came across a little pixel band when looking at a guide for improving my walk cycle and I really liked it so I thought I’d try my own. My band is a bit more metal though!

I used my pixel palette and to be honest, I really struggled because of this, particularly when I came to do the lights and backgound. I just don’t have enough different shades to get contrast between foreground and background for a scene like this. I’ll stick with it for now, but I want to try something different next time.


I did start hacking in some animation for Jumpy, but I realised that I probably wouldn’t need it this time around (and I was right!). I delivered the lesson to my prospective students but they were less experienced with Python than I was expecting so the session went much slower than I had planned. They seemed to like the idea though.

Other Stuff

Everything else was just paperwork this week. Lots of planning for September and such. No time for creativity.

Finding a path

Two posts in and I’m already displeased with every post being “Weekly Roundup”, so I’ll drop that part and try and come up with a clever title for each one (see, “finding a path” is clever because I’ve been working on path finding algorithms, but also I’m finding a path to writing more blog stuff. No? Nevermind.)


RPG (still a working title)

The Wizard protagonist is just a placeholder at the moment. RPG will be a sort of survival/RPG hybrid and you’ll start off as a normal human, but there’s a lot of engine work that still needs to be done, so I created a simple 4-frame walk animation for my wizard stand-in (y’know, instead of doing the engine work…):

Wizard Walking

Which looks quite cute (if small!)


I bought Aseprite this week after playing with the demo a bit, so I was able to use it to create the animation frames and I have to say I really like it. It has a quiet power that doesn’t get in the way. Previously I’ve been using Adobe Fireworks, which I like, but it’s so not designed for pixel art - no preview window for starters!

This paragraph was supposed to be all about how I plumbed in the path finding to make the wizard actually move, but it doesn’t, because I didn’t. Next week!

New Lessons - Logo & Scratch Racing

I added a new Logo project to my lessons site. This one started life as a word document and I didn’t have the screenshots anymore, so I had to save them out of the word doc which lost some quality. It was originally a little Year 7 filler lesson, but I quite like it and it ended up being useful with a few other groups too.

Scratch Racing is a funky project for making a little top-down racing game. I had to re-shoot all of the screenshots to match up with Scratch 2 as I originally made this project some time ago using the old version which looks really different.

I have about 3 or 4 more ‘old’ projects that I want to consolidate like this. Once that’s done I need to write a whole bunch more for next year!


I started writing this post on Monday and set out all the headings and stuff so I knew what I needed to write about. I very nearly deleted the “other project 2” heading, because I didn’t think I had another project in me this week. Then I came out of meeting with Old, Friendly “Oh crap, I completely forgot I needed to do that for next week” and Jumpy was born.

I needed a project for an induction lesson I’m teaching next week. It’s a terrible platform game engine, but, but, but, it only uses Tkinter which is important because it needs to work with stock Python without the ability to install fancy packages for working with images or drawing fancy sprites!

Working within these kinds of limitations is a vastly underrated skill in my job!

I made a cute little file icon too:

This all took quite a bit of time and marks an important milestone: I actually up and moved to Python 3, which took more effort to get installed on my work machine than I care to mention. Technically I got paid to write a game, so I’m an actual game developer now. Sweet! See also how I reused my wizard sprite from above? Completely justifies the time I spent on Tuesday working on him!

Weekly Roundup - Beginnings

I want to try something new (new here anyway). I’m going to try and write a blog post at least each week with a list of all the stuff I have created. I create a lot of things during the course of a week, usually stuff related to my actual job, but often there’s stuff in there that’s interesting in one way or another.


RPG (working title!) is a simple game I’m using to allow me to develop Glixl, my WebGL pixel engine.

I’ve been working on it for a while, but this week I finally created the GitHub Repo.

The primary highlight of this is the pseudo-depth - You can walk the wizard around with the WASD keys and he’ll go behind stuff like the trees. This week I also ported my A-Star pathfinding code from JawsJS, but still need to actually use it to control the wizard.

Pixel Palette

Since creating my pixel palette (almost a year ago! Wow!), I still feel like it’s working ok. I read an update post from eevee that mentioned using the DB32 palette (which oddly I’d not seen before, even though DB16 was the inspiration for my own palette!). There was a reply in the DB32 thread where someone had produced all of the dithers for the palette, which I thought was a really cool idea. I started doing it for my own palette (which I realise now needs a name).

Palette Dithers

It looked cool and developed my colour knowledge a little but I’m not completely sure how practical it will be. I usually work on such a small scale anyway that dithering doesn’t really work, but it might come in handy for some larger scale works, particularly for shading and highlights.

Eevee’s post also turned me on to Aseprite, which is a really nice little pixel editor. What I like was that it’s available for Windows and Mac (and Linux), which means I could have the same tool on my work machine and home machine. I’ve played with the trial a little so far and it seems to work quite nicely.

Lesson Projects

My day job is Teaching. I create a lot of resources for various things. I created a site using GitHub Pages to put my lesson objective slides on, my goal was to have a simple template I could fill in which I could easily share with my colleagues.

I took this a little further last week and started putting all my little projects online in a single format on my Lessons Site.

So far I just have 4 lessons that some of my students are working through this term. The Stop Motion one needs more content for actually putting the movie together. It’s been quite helpful to have these in an ‘agnostic’ format.

Made a feed for just blurbs to pipe into IFTTT so they post to Twitter automatically. Wonder if it works…

Bipedal Robot

A little while ago I saw a really cool project that got me really excited about microprocessors and tinkering with hardware. I’ve been aware of the Arduino project for a while but my limited grasp of resistors and capacitors was holding me back a little.

A couple of weeks ago I caved and bought myself a Genuino Uno and a basic starter kit from Amazon. Once I’d built a few of the tutorial circuits I started looking around for other projects to build; the Gamebuino project above is still a little beyond my skills but definitely something I want to work towards. Whilst looking around at the various things people do with their Arduinos I came across an awesome Quadruped robot and wondered how I might build one of my own. I kept browsing and found BoB the Biped. The cool thing about BoB is that he only needs 4 servos and I happened to already have 4 servos that I’d preserved from an RC plane I had as a really young kid! I (literally) dusted them off and hooked them up, one at a time, to my Uno with the Sweep tutorial loaded and was amazed when each of my 20-year-old servos worked flawlessly!

The instructables BoB is made from 3D printed parts, but I don’t have easy access to one of those, plus I wanted the option of maybe using it as a project with my students in the future so I decided to try building him from cardboard.

I stole a few unused packing boxes from a recent office move at work and set to work cutting and gluing the parts - shape was taken from the pictures with rough measurements that felt right at the time.

I worked on the legs first - I was a bit foolish to start with, cutting long pieces of cardboard, gluing together and then bending them to try to make the ‘L’ piece. These didn’t come close to bearing the weight of a single servo, let alone all the other stuff. I initially flirted with the idea of adding struts to add some extra support until I realised I was looking at it from the wrong angle. I cut 4 ‘L’ shaped pieces of cardboard and glued them all together to create a pretty sturdy leg. I used PVA glue to stick the layers together, which seems to actually add a bit of strength.

Next I measured out my servos and cut a ‘Pelvis’ with holes to drop them into. In an effort to save some weight (and drawing time!) I only cut 3 layers. I was pretty proud when the 3 sections were glued together and the servo cutouts matched within less than a millimetre!

I used a hot glue gun to glue the servos into the holes and the legs onto the servos.

cardboard frame

Next I used the headers and some old protoboard I had laying around and soldered up a simple connector board that provided 6v of power using 4 NiMH AA cells. I used the same cells to power my Uno via the Vin connector and although 6v is a bit low for the voltage regulator according to the docs, it seems to work ok.

cardboard guts

I made a cool head to cover it all by cutting carboard panels and hot-gluing them together. It’s a little rougher than I’d like but I’m going to add proximity sensors and other features later on, so I’ll likely build a new one to mount those into. I think this one was a little too tall as well, which caused a few balance problems.

Coding was next. I’ve been using a mixture of the official Arduino IDE and a web-based editor called codebender. I do intend to put my project code into GitHub, and I think codebender can interface with that but I need to investigate.

In the meantime, codebender lets you share code with a simple link, which is a little bit neater than pasting it all up in here:

Cardboard BoB Walking Code

After much fiddling with the various values, I ended up with a pretty effective walking gait, as evidenced in this awesome video:

Work still to do:

  • Add sensors so it can avoid obstacles
  • Add code to turn right, walk backwards & dance
  • Add a 8x8 LED matrix to display a mouth
  • Add sounds so convey emotions

I’ll probably write about some of those separately as I go.

Pixel Palette

So I had the idea that if I created a pixel art palette, any art that I make in the future will be inter-compatible - so when I make bunch of robots for a dystopian future thriller game, they’ll fit right in lurking in a cave re-purposed by a bunch of orcs.

Or something like that anyway - it’s a nice way to fill an afternoon and I think I have something I like.

Pixel Palette

16 is the traditional number of colours so I went with that. There are still a couple of colours I’m not completely sure about, but I’ll only really know for sure once I start making things with it.

Working on my Pixelling. Had an idea for a sort of Urban Survival game. Making graphics is hard though!



I have been working on a site for my photos and other ‘art’ for ages now. I’ve finally added a link to the site in the sidebar.

The site is hosted as a GitHub Pages site, I wanted something really simple but there were some challenges to overcome, chief of which was being able to post a photo directly from my iPhone.

I plan to write a post about the python app I wrote in Pythonista that uses the GitHub API to post pictures.

Overall I’m happy with the simple design, although there are still some things I want to do:

  • Albums should display photos with their titles, rather than just the same as the stream
  • Load the stream as the page scrolls
  • Fill in the About page.