• About
  • Gallery of Images
  • Archives
  • Categories
  •   Storing 3 dimensional data in a 2 dimensional format

    14/05/18 - 15:51

    Hey everyone!

    I’ve had few questions about how I store 3d shapes inside a 2d texture. Or in other words, how do I turn this :

    Into this:

    Let me preface this by saying that all structures are contained in a 32x32x32 voxel cube – I’ll explain the reason for this later.

    So where do we start? Let’s look at a graphics file. My method of storing data uses a PNG file, and the reason for this is simple – every pixel has four channels associated with it. A red, green, blue and alpha channel. Each of these channels can contain a value from 0 to 255. Depending on these numbers, the pixel will be a different colour (or transparency). So that is already a fair chunk of data that can be held in single pixel – but how can we use these pixels to actually store 2d data?

    Well, it is easy to imagine how to store 2d data in a picture :

    Now one solution to this problem would be to have slices of 3d data, each one over laid onto the other. And this would look something like this :

    However, I didn’t want to use that approach – it works, but seems clunky to me. So I decided to go in a different direction. There are four whole channels per pixel to play around with, so it seems like a sub-optimal solution not to use them all.

    So, a tiny bit of maths. Let’s look at the number 255 in binary:


    Well, that was exciting 🙂

    Let us imagine the lightest pixel in the universe, where all the channels are set to 255 – pure blinding white with no transparency, it would look like this:

    r(255) , g(255), b(255), a(255)

    Now if we translate this into binary (and this is the most important part) we get the following:

    11111111 11111111 11111111 11111111

    Now lets imagine the most pathetic of all pixels, where all the channels are set to 0

    r(0), g(0), b(0), a(0)

    And if we convert that to binary, unsurprisingly we get four sets of zeros:

    00000000 00000000 00000000 00000000

    Hmmm, lets try something else, let us imagine a light grey which is kinda transparent.:

    r(170), g(170), b(170), a(170)

    Translating that into binary, we get the following:

    10101010 10101010 10101010 10101010

    Now wait a second! what if we represented empty space as a 0 and a voxel as a 1? Suddenly, BOOM, you have a data structure that can hold what voxels are occupied in a row. And this is in one pixel – so if a I have a 2D set of different colours that represent different rows of voxels, I have 3d data in a 2d image! This is why I take things in a 32x32x32 cube – everything meshes together to make a nice optimal solution!

    Now this is not an old trick ( the BBC used a similar idea to hold level data in hex values – I wrote about it here many years ago ). But it does mean that you can store 3d data in a png file. There are a couple of additional things that I do. Firstly you will see that though the width of the file is a sensible number, the height is 33. This is because I use the last row (or the first row depending on your conventions – I don’t judge!) to hold material data. The very first pixel on this row is the index I use to represent an empty voxel, and the first mini image is used as a checksum – it is the empty space in and around the 32x32x32 cube. If I find any of the subsequent images trying to write in that area, I know something has gone horribly horribly wrong. The second and other pixels in that row are used to indicate what material the voxel I’m placing in each one should be (earth, copper, lavarite etc; ). Once I’ve gone through this row, I know how many images I’m going to need to process, and perform a quick check sum to make sure that I have the same number of mini images as I do last row pixels.

    And that, my friends, is how you can store 3d information in a 2d picture 🙂

    A quick confession however – the image at the top of this blog post actually has the alpha channel removed – because otherwise when your browser tries to display it, it will look like this :

    But assuming wordpress hasn’t done anything to garble the image – you should be able to download it, open it up in a graphics editor of your choice and see the invisible pixels 🙂

    If you have any questions or comments feel free to use the box below, or hit me up on twitter. Hope you have a fantastic day!

    Nic Nic

      Guess who is back? A small life update

    26/03/18 - 10:59

    So obligatory: it’s been a while since I’ve posted/spammed the interwebs with my random musings. Life sometimes gets a tiny bit crazy. However, I’m back now with a small update with what is new with my life.

    At the end of last year, I lost my job (boo! hisss!) – and after the initial shock it suddenly occurred to me – I was in a financial position that would allow me to focus on my real passion, game development (yay!). I sat down in a dark, candle lit room and started drafting down ideas: gameplay concepts, themes, badly drawn stick figures doing things to each with weapons of mass destruction.  That kind of thing.

    And from those scribbles an idea started to solidify. I’ve always loved simulation games, a hobby that started many, many moons ago with SimEarth. Since then, I’ve played a lot of them: RimWorld, Dwarf Fortress and Prison Architect, to name a few. I dread to think how much time I’ve spent commanding virtual people to build/slaughter things [edit: I just checked my steam stats for RimWorld and Prison Architect and can confirm I’ve spent *way* too long playing both]. There is something supremely satisfying watching your people work with blue prints you create in order to build something magnificent. Seeing how they interact with each other, watching behaviours and friendships form. Poking one place in a simulated world and watching something happen. Slowly, but surely, FringePlanet started to take shape.

    Concept Artwork

    FringePlanet is a simulator game. It’s set in a universe where both science and magic co-exist. It’s heavily voxel inspired. It has quite the grand road plan (which will be appearing on it’s homepage: http://fringeplanetgame.com). It’s aimed at the single player PC market place (via steam) but a Mac/Linux version is fairly high on the priority list as well.

    It has been under development for about three months now, and I’ve got to the point where it has actually started to look and feel like a game. That re-assuring feeling you get when you’ve taken an idea, written a bunch of code, and got it into a playable state and a little voice in your head actually says “wait, this is actually really fun”.

    So, I then took the next big step, and formed my own company. I’m a director of a company now – it’s a bit weird thinking about the reality of that. I even had to record the official minutes of the meeting where the company was formed. Attendance of which consisted of the Director of the company (me), the shareholder of the company (me), the secretary of the company (me) and the company mascots (my cats – though they were busy playing at the time so may not have been paying that much attention).

    I’ve  applied for funding from various sources, and will be blogging about that process in the future – alas, my funds are not infinite and the earliest realistic release date for FringePlanet will be early next year (though I am planning to run a private alpha before that).

    I’ve got into a regular schedule of development work: Mondays are “code clean up” days – refactoring code, documenting things, cleaning up any debug code, fixing any bugs that occur during the daily play through. Wednesdays are “idea” days – fleshing out game mechanics, working on specific implementations. Saturdays are “eye candy” days – making things look prettier, creating textures/models etc;.  Every night after I finish work I create a daily build of the game. I’m using a raspberry pi powered GitLab for version control (it’s even got a speaker attached to it and it plays a fanfare whenever I push). Working on FringePlanet has very much become my life.

    I’ll be blogging about both the game and the journey, and of course, spamming twitter randomly about it – GreenSlimeGames.com will be my personal blog about the journey, professional type blog posts/news about the game will be on FringePlanetGame.com.

    This is all a very definitely scary process – biting the bullet and making game development my full time job – but it is the most satisfied I’ve felt in my life.

    Gameplay image

    Nic Nic

      LowRezJam – Report 14

    17/05/14 - 20:37

    GUI for harvesters

    Just a quick update for today, as rather busy with rl alas.  Harvester’s now have a gui when you right click them.  This was primarily because every time I accidentally right clicked ( and called a flying ship ) on accident on them ( when I was trying to move them ) –  I was getting annoyed.  So now a menu appears.  You will also notice you can fix harvesters.  The small black pixels on the animation are meant to represent the crew getting out and fixing it.  The amount fixed is random, but will have a set a cost ( it is free at the moment ).  More experienced crews will have a higher chance of fixing damage – there is a harvester upgrade system now in place, but it has no gui, so you will just have to wait for that 🙂

    Tiny people fixing the harvester

    Once the harvester experience system is in place, I think I’m going to move onto the hardest part … base building 🙂



      LowRezJam – Report 13

    16/05/14 - 22:20

    Sand falling across the DunesA bunch of small bugs fixed today.  And added some performance tweaking for when things that are not in screen – all boring and can’t show you anything as the tweaks are inherently invisible 🙂  So what did I add that was visible?  well firstly a new environmental effect.  Sand is blown randomly around the screen.  I’m not sure if I like it or not – even though there is a wind that changes randomly to determine spawn rates of sand particles – it does just look like a drawing bug.  If I can get dunes looking nice and 3d it may work nicely – but not very into it at the moment – let me know what you think 🙂  Second thing I can show you is “Orange Blows”.  Basically a concentration of orange is produced and grows … gradually this Orange Pre-Mass gets to a point where if a harvester travels over it, it will explode, spreading orange everywhere!

    Orange explodes!

    As you can see the harvester takes damage whenever this happens, but it means that there is more orange to harvest.  The orange must flow! 🙂  I manually spawned these lumps in, they actually occur ‘naturally’ when there is less than 40% of the orange to mine.  They can spawn anywhere, and don’t appear on the minimap – so it is worthwhile to seek them, as your harvester can mine even when you think all the orange is gone 🙂

    RL photos do not make good pixel art :/

    ^^ WIP adviser – which shows that scaling 32×32 rl pictures really doesn’t make for good artwork … I’m also working on the title screen atm, as think I have finally decided on a name 🙂

    And what cliched title am I going to use with opening? :)Must be a reason for such a huge star-field 🙂



      LowRezJam – Report 12

    15/05/14 - 21:38

    [Lots of animated GIFs today, page may be slow to load]

    Yay! Minimap!


    So today I added a minimap 🙂  It shows harvesters, carrying ships and worms.  The world is huge compared to the viewport ( 1000×1000 vs 32×32 ) so I needed a way to navigate around it.  The minimap helps towards this.  The dark green represents where you are viewing in the world.  The blue are harvester; the cool thing about that is the harvesters flash between two different blues to show they are harvesting.  If they ain’t flashing you either need to call in a carrying ship, or move them to some orange to harvest.

    The map doesn’t consume the total screen on purpose … you can still move the camera around on it and see how you are moving, the one pixel hint helps in deciding location :).  Grey represents the giant carrying ship, it is now spawned at your base rather than near the harvester.  Now when you right click on the harvester –  it makes its way to the harvester, picking it up, taking it to base, getting some funds then returning it.  The flashing purple light is dropped to show where a harvester is picked up from :

    this isn't about dune, honest ;)

    After playing around with the minimap and moving around, I decided I needed a way to move faster.  Navigation is done with the arrow keys atm, holding shift moves you five pixels instead of one – which makes a huge speed increase :

    zoooooooooooom :)

    The rapid movement caused is by holding shift while moving arrow keys, slow movement is just arrow keys.  And that is about all for now.  Adding a minimap actually helped with debugging:  I noticed harvesters stopped harvesting when off screen, due to a miscalculation based upon location.  So this really helped with that.  That is all for now folks 🙂