I decided I’m going to create a blog to journal creating the game.
It’ll give you all a chance to see what’s getting ton, how, and what’s to come.
Before I make the offbeatr(kickstarter-like) project page, I need to have something to show people, so I’ve started working on the game so there will be something for people to demo.
When thinking of where to start, I was thinking I need to be able to define the “zones” so you can “go north”, “go east” and so on to walk around. Sounds simple, but programming something like that would be silly. I mean, I could do something like this:
[{'0,1':'lots of data'},{'0,2':'lots of data'},{'1,2':'lots of data'},{'2,2':'lots of data'}]
To map some cords of places you can go, and fill them with data, like the NPCs and such that are there. But, that’s pretty painstaking to right out, is a lot of manual work, and it’s hard to picture in ones head. 0,1 is 0 down, 1 across, then the next is one more down, then another across, and another down, so it’s a little step shape going to the left.
It came to me that, what else is good at storing 2d data, to make 2d paths? An image.
Lots of games use 2d textures for storing data, like a height-map used to map the height of terrain. Lighter pixels means higher up.
I’ve never seen the same applied to a game made in Javascript, but I couldn’t see why it wasn’t possible.
So I made my little map. 
Too little to see? Alright, here is a bigger one.
This little image is just a kilobyte, but can store all the information I need. It comes out looking like this:
[[0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,255,255,255], [255,255,255,255], [0,255,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [255,255,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [255,255,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,255,255,255], [0,0,0,255], [0,0,0,255], [255,255,255,255], [255,255,255,255], [255,255,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [255,255,255,255], [255,255,255,255], [255,255,255,255], [255,255,255,255], [0,0,0,255], [255,255,255,255], [100,0,0,255], [109,0,0,255], [121,0,0,255], [136,0,0,255], [0,0,0,255], [0,0,0,255], [255,0,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,255,255,255], [0,0,0,255], [0,0,0,255], [255,255,255,255], [255,255,255,255], [255,255,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [135,0,0,255], [152,0,0,255], [169,0,0,255], [186,0,0,255], [203,0,0,255], [220,0,0,255], [234,0,0,255], [247,0,0,255], [255,0,0,255], [0,255,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [100,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [255,0,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [106,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [115,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [125,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [137,0,0,255], [152,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [165,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [179,0,0,255], [195,0,0,255], [210,0,0,255], [224,0,0,255], [237,0,0,255], [247,0,0,255], [0,255,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [192,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [206,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [255,0,255,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255], [0,0,0,255]]
There are 4 channels of data from 0-255 there. Red, Green, Blue, and Alpha(transparency).
I doubt I’ll need the 4th channel. Heck, I probably only need two channels, as there is so much data there.
At the moment, in where I’m at now, I’m just using two points of data out of those 4 groups of numbers. I’m just reading reading black (0,0,0) and making that a blocked space, and anything else is walkable on. The rest will be read to say, maybe the red channel is difficulty. So you have from 0-255 levels of difficulty that could adjust a mobs stats. Then I can use the blue to mark non-aggressive NPCs. Like one NPC might be bound to this map on 200 blue, and another on 210 blue. These could sell things. Then I have those purple points, blue+red, these specific NPCs that you can fight, so they also have a difficulty there. Random encounters could also be on the same spots. IE: You go to a purple square, and it rolls a random encounter chance for mobs on that difficulty point, and if the roll fails it rolls your chance for the set NPC as well. Multiple NPCs could be bound on the same color. White (255,255,255) are areas where you just walk, but the only thing you’ll encounter is other players. The green channel I figure will be non-NPC interactive things, like entrances or teleporters to new areas.
The cool thing about this, besides making it easy for me to visualize a map (It literally takes seconds to make one, and you can make them in MSPaint), is that anyone can make them, so I can have staff make maps. Someone who is writing stories can make a map and put their NPCs just where they want them.
The demo I’m going to show below is creating the map in real time in your browser from that little 20×20 pixel image above. In the future I’ll probably have the server generate those numbers from images and just send the client the numbers. This will make it easy to update maps in real time. (For example: you’re playing the game, in that area with dozens or even thousands of others, and suddenly the map changes to create a new area in real time without reloading the page or anything. This means that a staff can upload a modified map to replace a current one, and it suddenly changes for everyone. Obviously there is a little issue of making sure where someone standing now doesn’t being an impassable spot[black], but the real time changing part is rather simple. This will be useful for events. Maps could also change when it’s day/night, opening and closing paths, enabling or disabling teleporters, etc.)
I thought of making it so people can upload their own map and really see how it reads the image to create an area, but:
- I’d have to waste time making a new image uploader for that.
- You guys would just upload thousands of pictures to make maps that have paths in the shape of dicks and tits.
Here is the result, with added buttons to move around too!:
There are buttons there to move. I’d probably bind szxc or something to move as well, but not just yet.
I could have made the areas much smaller. Really, it’d be possible to have pixel-point resolution to it and to be able to move in 8 directions. I like it like this, though. It keeps the same spirit of that whole “go north” thing to move to a whole new room sized area. I think that’s just the right size for them to be, room sized.
There isn’t a limit, engine wise, to how large the squares are, or how large maps are. It’s just a matter of the size that feels right.
This grid could be over painted backgrounds, but that’ll take quite some funding. It’s a very simple change though.
I’m also not sure whether I’m going to have this map be big, and maybe when stories come up they go over top, or if I’ll just have it small in a corner like a minimap. We’ll see!
It’s just getting started, this whole thing, from thinking up the idea of creating maps from an image, making it happen, and making it so you can move around and it would know what area you’re on took less than a day.
I’ll be able to get a ton more done if I can be working on this all day for weeks/months. I originally planned having a grid to move along instead of the “go north” thing as a stretch goal, but this made too much sense and streamline things so nicely, I skipped right ahead to it.
Next I will probably make this thing be online, after that the character creation, and we’ll work on getting some story into it.
Don’t forgot to read the game proposal. http://www.rphaven.com/lewdgame/ And fill out that tiny 2 question survey at the bottom. Even if you’re uninterested in supporting it, let me know.
