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.

Example:

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: http://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html. 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:

player.png
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: https://developer.apple.com/library/iOs/qa/qa1686/_index.html. 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: http://support.ludei.com/hc/en-us/articles/200924196-Using-the-XCode-Project-generated-by-the-cloud-compiler-to-publish-your-project-in-iOS

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.

Conclusion

I think they had a lot of ambission 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: http://projects.agmprojects.com/7dfps2013. 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.

Communicating with your user base

Just wanted to write a quick post about this. I recently read an article about a large company hiring a programmer off hackernews, and how programmers want to be engaged more with what they're producing.

While I work a full time job at Mosaic and I enjoy it, I also have had a Shopify application in a beta state for the past month or two. More recently, I've been in touch with a couple shopify users that are interested in my app.

They have been emailing questions, asking me about the application, can it do this, can it do that? Somethings so far I've looked at implementing, as it's something that's a good idea, not overly challenging, and something I just did not realize. The fact that I can send them an email to keep them up date, and communicate with them directly is such a great feeling. I know exactly what the writeer of that blog post was talking about.

For a shameless plug, here's my shopify app page: http://apps.shopify.com/clearcharity

Some learnings i've had so far

  • With feature requests, definitely evaluate what they're asking and see if it's doable, and if it's a feature many would want.
  • If you are not going to move forward with the feature, be honest and tell them why.
  • Keep them up to date when you post changes or potential implementations. This is likely an obvious point, but it keeps them engaged.