The Start of a Stealth Prototype

For the past month I've been working on a top down 2D stealth prototype. The game itself will evolve into much more than a stealth game I hope. I have bigger ideas for it, but for now I want to explore some of the concepts and ensure they will work.

So like most prototypes you start off drawing simple shapes, or using very little art, much like below:

As you can see the walls have boxes around them which are collidable bodies. The first level here is static. It's broken up into individual parts, and placed relative to each level. Using libgdx this process was actually fairly straight forward. What took some more doing was getting the camera to clamp to the edges of the level, while still following the player.

Movement with box2d, even arcade movement is pretty straight forward. Just have to set linear velocity accordingly. I've read from others in the past "don't use a physics engine for a platformer!". Honestly, I disagree. While you can point to funny examples like Box2D tetris, using it correctly can yield a lot of benefits. AABB collision & correction can be simple, but once you want to use polygon shapes, or triangles. I have 45 degree angle walls for example. It gets much harder on the math. I'm not very good at physics stuff, so I leverage Box2D.

Once the level got layed out, it needed some guards:

The guards have a cone vision, very similar to that of metal gear solid. The AI is super simple right now. There's two modes: chase or shoot. Both types start off patrolling from one point to another. If they catch you in their cone, they switch to their designated mode. The Chase one is pretty straight forward:

The red signifies you've been spotted, and the npc will chase you. If the npc catches you, you're done. If you get away, the NPC goes to your last position and looks around for a second:

It's pretty neat, but I have to say i'm not finding it compelling enough. I'm going to explore more group mentality with the NPCs in the near future. The AI in a stealth game needs to be perfect. For the shoot npc, if you get caught you die. They are very unforgiving, and will shoot you quickly and deadly.

The general view for the character at this time is completely non violent. They will use cunning and technical skills to hack around their enemies. Once I get the AI the way I want it, hacking puzzles and work arounds in the level is what I will explore next.

Thoughts on multi platform solutions

A couple days ago, I was at a JavaScript hacknight here in Toronto. I know the organizer (Dann) reasonably well, as i've been going to these events and other ones like it for a few years now.

I myself have been diving into cross platform solutions for a while, typically involving the JavaScript stack. I've messed around with nwjs a bit for desktop html5 games. I've used cordova for a couple projects at work to create android & iOS apps. I've written HTML5 games with various web libraries that are bundled in cocoonJS for the mobile app stores.

More recently for web content, I've been learning ReactJS. I have also watched the recent talks on React Native. All of these tools I find tend to serve two main purposes that the native frameworks do not:

  1. You can write the applications in a language you're familiar with
  2. Have more transferable code.

Obviously these vary from framework to framework. I'm sure we'll be using different components in iOS vs android environments with React Native.

I started talking with Dann about building native mac & windows apps with html+css+js and using NWJS, and how it almost feels wrong. Like we are clinging to the stack almost too much. No doubt it can be done, and can be done well. Atom is a good example of this. But I think there are limits.

Now let's say I wanted to build a markdown editor, as I'm picky and don't care much for the ones that exist already. The abstraction to native APIs that I would need would be writing to the file system. NodeJS makes this pretty simple, so an application like this is quite practical to build using a JavaScript stack.

What if I wanted to do something more complicated than that? What if I wanted to do a garage band type application? Where I'm able to record from an audio input device, split up a track, adjust volume levels, and export an mp3. This really steps up the difficulty. I'm sure it's doable with our beloved JS stack, but it's going to be much more practical using Cocoa APIs, and likewise the newer APIs in windows 8. Obviously that kind of application is much larger and vastly more complicated than the markdown editor. However, as I've worked on Cordova apps at work, it's easy to run into little problems here and there that an existing plugin doesn't solve. So you either end up writing your own plugin, or doing a bunch of hacky solutions JavaScript side, or you just leave it as a bad experience.

Over the last couple days, I have been doing some eesearch at work. The goal is to take 4 photos with an iOS app, and turn them into an animated gif. This gif would also require a client logo watermark on top, and it to be grayscaled. My tech lead found a pretty decent JavaScript plugin for putting images or video together to make a gif. However, the only way I could make it work with pure Javascript code, was to take 4 photos individually. Four calls to the camera plugin: ->
  launch camera plugin ->
    take photo ->
      confirm/retake ->

That was for each of the four pictures, so around 12 button presses. That's no good. My tech lead managed to find a tutorial on doing a custom camera plugin. We figured might as well try it for a couple hours, and see if it's practical. So I got started on it from the tutorial. I added some minor changes to it, as it had a couple bugs. Once I could take a single photo, I modified the Objective-C code a little bit to add an array of photo urls. Applied the resize & grayscale, then passed the array to the webview. This only took a few hours of work total. If I were to just pass the raw images to the web view, I'd have to then using multiple async calls to the file system. Resizing them with the canvas and grayscaling them would be so much more work, especially due to memory limitations of the webview. The simple & synchronous code on the iOS side made it this process much easier.

Now granted, if this project was going on android, windows phone and other devices, it becomes a bigger task to maintain the code base. But I felt quite pleased on the results when building a feature in the native side. At least this way, we can still leverage our design team on HTML & CSS. I know from now on that with Cordova, if we need more than the plugins provide us, there is a way.

I brought these kind of examples to Dann's attention. He responded, which I'm paraphrasing "It is quite silly that we have to use different languages for these platforms. Android runs Java, and iOS runs Objective C/Swift, this just adds friction for developers that want to build applications. It's these greivances that causes us to explore solutions that can work for each device. We create a common API that invokes the proper specific calls based on the platform."

He's absolute right about that. Frameworks like Titanium and Cordova do go for the write once, run everywher approach. However, with the speed that android & iOS move at, it's hard to keep up with all the native APIs. With Titanium, you can't write native components, you're stuffed if their API doesn't do something you need it to. This could very well apply to React Native.

That said, I do think it's worth it. I think with enough brains behind it all, and push for good practices, we can make these cross platform solutions work. Looking back in our history of hardware and cross platform support, very smart people worked on compilers that could work with various CPU architectures, so we could write things like C code on various computers. The web browser gives us a JavaScript run time that works fairly reliably across platforms. In the gaming world we have transpilers of HLSL to GLSL. Blizzard Entertainment has supported Mac & Windows games for years, signifying they must have tools for writing D3D code and OpenGL code with a native API.

But of course, we still have platform detection code. In game code I sometimes see #if windows, #if osx type calls. We will write different versions of shaders depending on the OpenGL version supported. Older code we wrote platform specific stuff, with the cordova app I wrote platform specific stuff. We all need to be smart on when we use certain tools. At the end of the day, use the right tools to deliver the experience you want to deliver.

Working on art, level design, it's tricky stuff

Kudos to all you artists and designers out there. I know it's a tricky skill and takes years to develop, but I have even more respect for you after trying to make my own assets for Search For Hope. A short, 2D platformer that I am working on.

I haven't published my latest changes to my site because I like my deploys of games to be somewhat stable. But here are some visual updates that I've done.

The background for the intro now has some smoke/dark clouds above to hopefully give a more eerie atmosphere. I also added the cracks to the buildings/windows to show more destruction. I find this kind of challenging, as one really needs solid imagery to go with when they don't have the practice.

I updated some of the existing tiles, and added a few new ones. Mainly the dark gray rock tiles to have different shapes & edges to give it that more organic look for the underground. Again pretty simple art here, just trying to get by until I really get the game fledget out.

You'll notice a few lighter pieces in the middle. Those haven't been updated yet, but the theme of them is still accurate. The overall idea is that the further down you go, the better and more positive the scenery gets. And it keeps improving that way until you find the character a new home.

WebGL - Partial textures

This was something that took me a bit to understand when working with WebGL. When you draw a texture, you're going to be mapping coordinates of the texture to the coordinates you specify in your vertices array.


var x1 = object.pos.x;
var y1 = object.pos.y;
var x2 = object.pos.x + object.width;
var y2 = object.pos.y + object.height;

We have 4 variables, each for the different coordinates of a game object.

var vertices = [
  x1, y1,
  x2, y1,
  x1, y2,
  x1, y2,
  x2, y1,
  x2, y2

So we setup the two triangles to draw the square.

Top Left -> Top Right -> Bottom Left

Bottom Left -> Top Right -> Bottom Right

In 2d games, I typically prefer to have the Y value go up as you go down the screen, as supposed to the default. So I flip the coordinate in with a uniform matrix in a shader. This sit here shows how to set this up: Because of this, the texture coordinates get a little weird.

The texture i have below is 128x128. Be sure to always have them power of 2 and square.

What i want to draw is the 0, 0 32x32 of the image. My object that I showed earlier has the proper width & height values. So we just need to tell webgl where to start with the texture, and use those width & height properties.

WebGL texture coordinates and OpenGL for that matter always specify between 0 and 1. For x, 0 is the furthest left coordinate, 1 is the furthest right. 0.5 is in the middle. So we basically work this as a percentage:

var dw = (object.width / object.texture.image.width);
var dh = 1.0 - (object.height / object.texture.image.height);

The texture property is the created texture for actual drawing. The image property on that is the raw image data. I use that to get the true size of the image.

Though why am I taking a 1.0 value and subtracting the height? It's because of the Y flip. This is what got me for a bit when trying to get this to work. Because we have the Y flip in the uniform matrix, and not before the texture coords are all said & done, we need to use opposite Y values. So from there, I simply draw out what I need:

var textureCoords = [
  0.0, 1.0,
  dw, 1.0,
  0.0, dh,
  0.0, dh,
  dw, 1.0,
  dw, dh

As I said, each coordinate there is in order and maps to the coordinates in the vertices.

[0.0, 1.0] => [x1, y1]
[dw, 1.0] => [x2, y1]
[0.0, dh] => [x1, y2]
[0.0, dh] => [x1, y2]
[dw, 1.0] => [x2, y1]
[dw, dh] => [x2, y2]

We map the bottom left corner to the top left corner, the bottom corner, 32 pixels in to the top right corner, and so forth. The x position always stays the same, but I flipped the Y.

I hope this post helps.

Submitting your CocoonJS xcode project

As per my twitter, I ran into some issues with trying to validate my CocoonJS game. I'm sure there are some better ways to do it from what Ludei gives you, but I eventually managed to solve it by doing the following:

While I had uploaded an icon to Ludei's dev portal, I had the necessary files on my local machine as well. If you have them, be sure they follow the naming convention here: If you don't have them, simply:

  1. right-click on the xcodeproject file that you downloaded from ludei.
  2. Click Show File Contents
  3. Browse into appData
  4. Copy the Icon* image files into a local directory

Now that you have your icons named properly, copy them to the same folder as your xcode project file. You can have them in antoher folder here, but keep them in the project folder.

In xcode, you need to add the files to your project & build process:

  1. Click File
  2. Click Add Files to "Project Name"
  3. Select the image files.
  4. Click on your project target on the left side.
  5. Under general, App Icons, you should see the icons unfullfilled with a caution sign. Depending on your deployment targets, you'll need to provide an image for the various sizes. Refer to the above link for the necessary sizes. Add the images from the project.
  6. Click Build Phases
  7. Click the + at the top (above target dependencies for me)
  8. Click New Copy Files Build Phase
  9. Leave the options as they are, and press the plus button.
  10. Select the image files/folder.

Now you're ready. Be sure to test the application by deploying it your device. Ludei gives a pretty good guide on setting up your provisioning profile and deploying to your device here:

Once you're ready, go to the product menu, and click "Archive". This creates the .ipa file, and makes it all set to go for uploading.

The organizer will open (Press CMD+Shift+2) if it doesn't. And be sure you see your icon besize the project name. Then press validate, and follow the wizard.

You want to make sure the validator gives you zero warnings & zero errors before you Distribute it to the app store.

Hope this helps, as this was a pretty big pain point for me,

Snowball Effect - dev updates

I really need to update more often on this project. I've done some experimenting with the game on making it infinite. I found that had little merit, so ditched the idea and decided to stick with levels.

I am aiming to have 3-4 levels in it before I launch it on both the iOS App store, and Google Play.

Feature updates

  • Fixed a bug on iOS mobile safari where the snowball would disappear
  • Made minor speed changes to level one. It now progresses a bit slower on difficulty.
  • Level two has been added. It spawns two fire traps, leading to more rapidly occuring hazards.
  • Skiers added as a target in level two.
  • Level selection menu after pressing start:
Level selection menu

Level selection menu

You can play the current development version with a modern browser here.

Still to come, is setting up level three. I have a few things I hope to add to level three:

  • Slower speed, but more hazards
  • Add a second hazard type that is a bit larger, with higher damage, but spawns rarely.
  • Terrain/button press jumps. The ability to jump over smaller hazards is something I'd like to put in.

Thanks for reading!

My Thoughts on Elder Scrolls Online

I don't normally post about games, and what I think of them, as I'm not a journalist. But since the NDA was lifted and I played a bit of the beta, I just wanted to voice my opinion on it.

I feel like the environmental backdrop and the art used makes it feel like an elderscrolls game. However, I found that having other people run around all the time kind of ruins the experience for me.

Think of Skyrim or Oblivion, where you might enter stealth, patiently approach a couple enemies to do a backstab. Then imagine another person running up and attacking them with a sword. Or shooting a spell. The problem is it breaks the immersion.

Controls & Feel

I feel like these are done decently well. I'm not too fond of some of the defaults, but that's what rebinding is for. Like in Skyrim (and maybe oblivion, I can't remember) you can switch between first and third person views. I've always preferred first person in the Elder Scrolls series, but in an MMO anyone using third person will simply have an advantage over first person players. So you can pretty much toss first person out the window, unless you're willing to deal with the limitation.

The feel of combat is good though. You still do full aiming and clicking to swing your weapon. Abilities trigger instantly, at least the ones ive used. A bow ability will instantly fire an arrow, where as a regular attack will draw the arrow slowly, and release when you release the mouse button.


I think they had a lot of ambition and a very high bar making an MMO under The Elder Scrolls brand. But it just doesnt meet the usual feelings I get when I play a game like Skyrim. So for now, I'd rather save my pennies, not worry about a monthly subscription, and continue to play Guild Wars 2 instead.

The snowball effect

For September, I started a new game called The Snowball Effect. Just a simple prototype for now, but the idea is for it to be a katamari-like game where you roll down a hill, colliding into objects such as trees. The idea is to get big enough by the end of the slope so you can demolish a cabin.

A friend of mine gave me the basic idea, and I've been just expanding on it since. I have some other ideas to potentially add levels as well. This might include things like bon fires that would reduce your size, skiiers to dodge, interesting terrain maybe if I get to it. Though terrain that would be anything but flat would be rather hard with the 2d setup I currently have.

Three.js was a consideration of mine for this project, but I figured it would be too difficult to really get going in the period of a month. Presently I am more focused on developing my 2d skills, as a couple larger game ideas that I have are to be 2d as well. 3d programming is pretty fun though, as it's such a different world.

Books app

Been rethinking an idea for a while now. In college, I worked on a project that was to help students sell their used text books. At our college all we had were bulliton boards around the campus. Amazon and Kijiji are nice options, but I think something targeted towards campuses and text books specifically might have something to it.

I started rebuilding the app to be much simpler than the craziness I had back from college. I started around when Rails 4 beta 1 came about and dabbled with it here and there, more or less to try out the new features.

Tonight I felt like taking a break from my latest game (which I'll make a post about) and hack on the app a bit more. I already had some features done:

  • some basic user authentication
  • styling ontop of twitter bootstrap
  • basic searching for books
  • loading data from Amazon's API
  • posting books for sale

This evening I added some other essentials such as editing your items for sale, and marking them as sold.

Earlier today, I started writing out what I'd like for mobile integration. No doubt responsive design is a great way to go, but I think I can take huge advantage of native features. Instead of someone going to the website to complete the transaction, they can say to the buyer they're interested. The seller would receive a push notification that someone is interested. Both parties can decide where they want to meet on campus. When the money is exchanged, the seller can hit a button on their phone to mark it as sold.

Ecommerce is another thing to consider with the mobile app. Having the ability to pay the other user through the app, but that will take some more research to figure out the best solution.

My main concern with this app is that it's kinda big, and therefore it's a bit scary. Most of the stuff on the web side is not so bad, definitely worth testing so the user experience is solid. However, building an API would require work, as well as the mobile apps itself. I pretty much have zero experience in developing native apps, and I don't think I can justify paying someone else to do it right now either.

It's hard to say how I feel about this app. I enjoy rails programming, it's great practice to write tests, and to try to build something like this. At the same time though, I do like making things like games. Really it comes down to figuring out what I want out of this, and what I feel is worth my time. I have to admit, I'm not even sure how I would market this, aside from perhaps getting some tech sites to review the mobile apps.

As far as competition goes, I have not done extensive research by any means. Some brief google searching led me to sites which handle the full transaction and shipping. Definitely nice for people finding books across the world from one another. Me though, I'm more focused on the local transaction much like with Kijiji for students that may not want to pay extra for shipping.

7 Day FPS

Going to be giving 7dfps a try. The idea is create a first person shooter game in the period of a week. I started with a pretty good base of controls written using the Three.JS library. I took it, and added a simple shoot function. The shoot still needs work, but it's been quite fun learning about 3D!

My current build is here: As you can see a lot still needs to be done. I want to customize the ground, to differentiate it more from the starting point, but first i need to get shooting right so you can kill that green ball.