No Promises

So, I’ve had my head buried in a fun project over the last couple weeks. I want to share it with you.

The basic concept was that I wanted to make a game with transparency in the sprite sheet, but without using a tool that lets me set pixels to transparent (no fancy tools, just basic ones). So I used Microsoft Paint, mixed two types of background colors that I could easily single out later for transparency (I think they are [254, 0, 254] and [0, 254, 0] — notice the “full” values are one value lower than the full 255). Then I drew a grid with those colors (more of a checkerboard) for 16 by 16 sprites, and started making a game. I pasted in a few NES and GameBoy sprites that were the right size just for testing purposes (I will probably replace them later, but they are still there for now). In the JavaScript, I use the HTML5 Canvas ability to pull pixel data, manipulate it, write it back in, and save it as an image object for use later. Because of a security feature with the canvas element (“tainted” canvas or something) this feature doesn’t work offline. So I had to make two rendering modes for testing purposes, but it auto-detects when it’s being served from the web, and uses the appropriate rendering mode.

This is the blank tilesheet I created.

This is the blank tilesheet I created.

Because the transparency is calculated manually, I thought it would be good to only load in the sprites that were needed for each map. This turned out to be a stupid way to do things, so I might be having it just do the process once at the beginning later instead of doing it every time I load a map or the help screen.

Then I wanted to make random dungeons. That turned out to be quite the challenge. I think I mostly succeeded though — I really like some of the designs it comes up with. I’m 100% positive my algorithm is the least efficient way of doing it, but it gets the job done. The maps it generates are really fun and interesting to explore (for me, at least). I hope you like this feature. I’m thinking about implementing a new “rendering mode” that uses these maps for a text based adventure game. All of the creatures, items, and rooms would be the same, it would just present the area to you in text form rather than visually. It could be a fun experiment.

Then I started sprinkling random things in for a while before realizing that I had room for over 1000 sprites, and only had a little over 100. The separate item sprite (for the HTML inventory display) sheet is also over sized. So I’m kind of thinking of filling those spaces with even more sprites. Some things are fairly easy to add in dynamically (like walls, floors, and furniture), and other (more interactive) things are only a little more involved to add in (like trolls who block doors, items, and other characters). If you want to submit some new sprites with descriptions of what they would be or do, let me know (email address on the right).

I also wanted to add a particle system, but I wanted it to fit in with the pixelated environment (unlike the particle system I designed for my space experiment game). The particle system turned out really nice, and I was even able to use it for a visual “+1” that pops up when you pick up or get an item. Particle emitters can behave like explosions (I even used the pixel data to create correctly colored particles in the same locations as the pixels of the exploding block before scattering them), or spray emitters that can be turned on or off, or any number of other things I haven’t tried.

The next thing I wanted was for it to be multi-player. Since I don’t do any server-side code still I decided to go with multiple players on one keyboard. Eventually I added a third player who uses the mouse. The controls for the keyboard players took a bit of work to get right. Players expect a certain behavior (rocking between directions as though using an NES controller D-pad). They want to be going one way, “rock” into another direction by hitting an additional key while still holding the first one to make a turn, and resume the previous direction of travel when they release the additional key. It’s harder to say than to do–you probably do it already naturally. And you expect it to work. Unfortunately it turned out to be a lot more complicated to code. But I succeeded. Again, it’s not the best code, but it does what it needs to do.

I also wanted to add in a leader board. Again, since I don’t do server side code yet the leader board is local only (hearkening back to the days of early arcade machines where the high scores were stored locally and you competed with others who used the same machine as you). I had to add in a way to put your name in (on the character select screen in the very beginning). If you forget, a default name is assigned.

One thing I’m very unhappy with is my persistence in using HTML to supplement what happens in the rendered game screen. Someday I’d like to make a game that has all of its interface inside the HTML canvas. Technically I did do this once, but the game has horrible flickering issues and is so poorly coded that fixing the flicker is nearly impossible. I’d need to rewrite the whole thing from scratch in order to fix it. I did reuse a couple sprites from that game though (since it also used 16 by 16 pixel sprites).

I can’t possibly think of all the other little problems I had to solve along the way (that’s what makes it fun for me). For example, this is my first project to use sound (I based the idea off this tutorial). I definitely need to redo some of the sounds, add more (including background music), and make sure the volume is consistent between them all. I recorded the current sounds (with one copyright-infringing exception that I hope falls under fair use) at 3am while everyone else was sleeping in the house, so it’s all my voice (sometimes sped up or slowed down). Audacity is a great little program for getting that sort of thing done.

99% made in Microsoft Paint

99% made in Microsoft Paint

In fact, nearly everything for this game was created with Microsoft Notepad, Microsoft Paint, and Audacity. One image, a fully transparent gif for the HTML formatting, was pulled from another project and couldn’t have been created with my chosen toolset.

Anyway, here’s the finished project. I call it “No Promises” because the game doesn’t check to see if a level is solvable (I can’t promise you’ll be able to beat every level). I added in the ability to abort a game (pause with Escape and click the screen) in case you get irreversibly stuck. An aborted game that includes at least one solved level will still be eligible for the leader board. Before aborting though, as long as some of the map is still hidden you can wait by the spawn point for random items to spawn. These items are designed to help you if you get stuck. Also, walls can have hidden doors in them (look for a wall tile that is just a little different from the rest).


0 Responses to “No Promises”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Subscribe to Me

What I’m Reading

When I Post

July 2014
« Jun   Aug »

RSS My Favorite Quotes

  • Quote #60
    "The greatest minds are capable of the greatest vices as well as the greatest virtues." - Rene Descartes
  • Quote #59
    "There is nothing noble in being superior to your fellow man; true nobility is being superior to your former self." - Ernest Hemingway
  • Quote #58
    "The fool doth think he is wise, but the wise man knows himself to be a fool." - William Shakespeare

I have had:

  • 50,224 page views (so far)

I’m a Twit

%d bloggers like this: