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.

Rendering shapes and drawings via the canvas in MelonJS

I've been using Melon JS for some months now to cure my various HTML5 itches. Messing around with it, I needed to render a health bar above an enemy. Libraries like LibGDX give you a shape renderer. Where you specify what kind of shape you wish to draw, you configure the colour, etc. It's a very similar structure to that of the canvas API.

Due to how MelonJS manages your objects on the screen, you can't just get the canvas context and draw as you like. Chances are your objects will be drawn on top of that. This is a pretty big issue if you use things like Tiledmap and so forth, where the background will get drawn on top of your shapes.

Luckily there's a pretty simple solution. As I said, this was to draw enemy health bars. So preferably, I'd like to keep the health bar drawing with the logic of my ObjectEntity. The ObjectEntity class has a draw function available. Normally it's not used, as when you setup animations and a sprite, it's usually not needed.

Here's the code to set it up:

Game.Enemy = me.ObjectEntity.extend({
init:function() {
var settings = {
spritewidth: 128,
spriteheight: 128,
image: "enemy"
};
this.updateColRect(40, 46, -1);
this.parent(100, 100, settings);
this.health = 10;
this.maxHealth = 10;
},

draw: function(context, rect) {
this.parent(context, rect);
this.drawHealth(context);
},
drawHealth: function(context) {
var percent = this.health / this.maxHealth;
var width = this.getCollisionBox().width;
context.fillStyle = 'green';
context.fillRect(this.getCollisionBox().x, this.pos.y - 12, width, 10);
},
getCollisionBox: function() {
return {
x: this.pos.x + this.collisionBox.colPos.x,
y: this.pos.y + this.collisionBox.colPos.y,
width: this.collisionBox.width,
height: this.collisionBox.height
};
},
});

To explain this code, the init function is just showing the bare minimum, but essentially im updating the collision rectangle to just surround the visible enemy.

The draw function is passed two parameters when invoked, so they must be forwarded to the super class draw. I then call my drawHealth method which uses the canvas api to draw a rectangle. I use my custom method to get the collision box positioning so I can position the rectangle accordingly.

And that is basically it. This might change over time due to MelonJS still being in its early stages. But as of now, it's a relatively simple way to draw shapes rather than render bitmaps.

A break from creating

Taking a break this month from creating games. I'll start thinking about ideas for the up coming Ludum Dare of course. But for April, I'm going to try and focus on messing with different tools and frameworks. I've been making stuff in Libgdx and Java, but I want to see what else is out there.

Html5 wise, I've done the most with MelonJS, which I like for many many reasons. It feels familiar, I find I can navigate around the source code quite easily. It has great tiled map support. What I do want to look into though (and already have begun) is Cocos2d. Just how the API is structured reminds me a lot of some 3d libraries I used to mess around with years ago.

I also want to look at C++ and SFML 2 for some reason. Not sure if I'll stick with it, but it's nice to see what is out there. Java definitely serves my purposes as far as performance is concerned.

To go much more high level, I have some bookmarks for learning unity, and I feel it's worth a few hours at least. While the cost of unity to get the extra features is quite high, one can make some pretty decent games for free.

Aside from that, I might toy with LWJGL a bit, and see what that is like.

My main focus here for sure is HTML5. While I do have concerns, it's hard to ignore the amazing feet that Mozilla and Unreal brought forward. If you're not sure what I'm referring to, install a nightly build of firefox, and check out: https://developer.mozilla.org/en/demos/detail/bananabread

Setting up a basic LibGDX project

This topic came up on one of my favourite game development communities, r/gamedev and I thought I should make a quick tutorial on setting up Libgdx for someone new in game development, so you don't have to worry.

You can use the gdx-setup-ui.jar, but I'd recommend against it. It segregates projects, creating a core, an android one, and more if you check it off. This is confusing and unnecessary for someone new to the library. To just get a desktop project in eclipse, here's what you do:

  1. Create a new Java Project under File > New > Java Project
  2. Give it a name, and click finish.
  3. Right click on the project folder on the left hand screen.
  4. In the right-click dialogue, go into New > Folder. Give it the name "assets"
  5. Do this again, and create a "libs". You can call them whatever you wish, it's just what i like to use. Assets is for images and such, libs will store the LibGDX jars.

Here's how your project should look:

project1.jpg

Download libgdx from here. Be Sure to grab the latest stable build. Unzip the folder. There's a lot of stuff in here, what you'll generally need are the following files:

  • gdx-backend-lwjgl-natives.jar
  • gdx-backend-lwjgl.jar
  • gdx-natives.jar
  • gdx-openal.jar
  • gdx.jar

You can grab other ones as you need them, for example if you want to use Tiled

  • extensions/gdx-tiled-preprocessor.jar
  • extensions/gdx-tools.jar

Copy the .jar files, and put them into the libs directory in your java project folder.

Now add the jars in eclipse:

  1. Right click on the project name
  2. Click refresh so the folders get updated with the Jar files.
  3. Right click again & select build path
  4. In the sub menu, select Configure Build Path
  5. In the now open window, click Add Jars on the right.
  6. Expand the project folder, and then expand libs
  7. Shift click all the jar files in the folder.
  8. Click OK
project2.jpg

Now that you have all the necessary binaries, time to create a simple window to start.

Add a new class to the src package. Be sure to name it the same as the project, as it's where we'll add the main method.

In the class, add the following import statements:

import com.badlogic.gdx.backends.lwjgl.LwjglApplication;
import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration;
import com.badlogic.gdx.Game;

LWJGL will be used to create the window. The import of the Game interface is for later. Setup your main method inside the class:

public static void main(String args[]) {
    LwjglApplicationConfiguration cfg = new LwjglApplicationConfiguration();
    cfg.width = 800;
    cfg.height = 640;
    cfg.useGL20 = false;
    LwjglApplication app = new LwjglApplication(new MyLibgdxGame(), cfg);
}

The setup here is pretty straight forward. We create a new configuration object to store the resolution of the window. We are not using OpenGL2.0, so set that to false. The last line is then creating a new application window, by passing this a new object of this class as the game. Eclipse will now complain there's a compiler error. To fix, extend your class with Game:

public class MyLibGdxGame extends Game {

Then add the interface method so the interface can be satisfied:

@Override
public void create() {

}

At this point you can build the game and a window will pop up. But it will flicker and such, which is not what we want. So what you can do now is add a new class.

  1. Call it GameScreen
  2. Add an interface to it in the creation wizard.
  3. The interface is called Screen and is part of com.badlogic.gdx package.
  4. Click finish

This class creates a lot of nice functionality for us to manage a game screen. You can use the screen interface for different states of the game. Such as menus, intro, game over, etc. It gives you initialization, a render method, pause, and other handy methods.

To solve our above problem, add the following line to the render method:

Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

This simply clears the screen with a black colour. It ensures that we won't get that flickering nonsense. Back in your main game class, add the screen to the game via:

 GameScreen gameScreen = new GameScreen();
 setScreen(gameScreen);

Put those in the create method, and try running the application. That's your basis on getting an application setup for libgdx. Definitely check out their documentation on how to use the framework. Just remember to start simple. Even just do some movement with shapes and such!

A note about assets. A lot of the tutorials refer to using the setup ui. Because of that, the assets load a bit differently. If you have a file in the assets folder called player.png, you can resolve that path simply using: Gdx.files.internal("assets/player.png")

Setting up Box2d with LibGDX

Since I've been participating in One game a month, I've been trying out Box2d with LibGDX. There's some pretty good information on the different pieces here incase you want more info on the subject.

To start, create a new libgdx project. You can set it up using the gdx-setup-ui.jar or just create a new project in eclipse, and import the necessary jars into the project.

The jars i have are:

  • gdx-backend-lwjgl-natives.jar
  • gdx-backend-lwjgl.jar
  • gdx-natives.jar
  • gdx-openal.jar
  • gdx-setup-ui.jar
  • gdx-tools.jar
  • gdx.jar

Setup your usual base class, and setup a screen for us to test things in:

MyGame.java

import com.badlogic.gdx.Game;
import com.badlogic.gdx.backends.lwjgl.LwjglApplication;
import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration;


public class MyGame extends Game {

  private GameScreen gameScreen;

  public MyGame() {

  }

  public static void main(String args[]) {
    LwjglApplicationConfiguration cfg = new LwjglApplicationConfiguration();
    cfg.width = 800;
    cfg.height = 600;
    LwjglApplication app = new LwjglApplication(new MyGame(), cfg);
  }

  @Override
  public void create() {
    gameScreen = new GameScreen();
    setScreen(gameScreen);
  }
}

GameScreen.java

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL10;


public class GameScreen implements Screen {

  @Override
  public void dispose() {
    // TODO Auto-generated method stub

  }

  @Override
  public void hide() {
    // TODO Auto-generated method stub

  }

  @Override
  public void pause() {
    // TODO Auto-generated method stub

  }

  @Override
  public void render(float arg0) {
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  }

  @Override
  public void resize(int arg0, int arg1) {
    // TODO Auto-generated method stub

  }

  @Override
  public void resume() {
    // TODO Auto-generated method stub

  }

  @Override
  public void show() {
    // TODO Auto-generated method stub

  }

}

Now it's time for the box2d bits. Box2d doesn't work in pixels, but in more real-world measurements of meters, kilometers an hour, and kilograms. I'm just concerned about the meters to pixels ratio for now, at least for this demo. Setup a couple constant properties in the GameScreen.

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL10;


public class GameScreen implements Screen {

  private static final float WORLD_TO_BOX = 0.01f;
  private static final float BOX_TO_WORLD = 100f;

  // ...
}

Lets setup the world. Add the following properties, much like the two above:

private World world;
private Box2DDebugRenderer debugRenderer;

The world is essentially the container of box2d. It is essential to add box2d physics to your game. The debugRenderer is so we can easily see what's happening. In the show method, set these values up:

public void show() {
    world = new World(new Vector2(0, -10), true);
    debugRenderer = new Box2DDebugRenderer();
}

The vector specifies the gravity. 0 because we dont want horizontal gravity, -10 so you get pulled downwards towards y = 0.

To setup some basic rendering, setup the OrthographicalCamera:

private OrthographicCamera camera;

Then initialize it as well in the show method:

camera = new OrthographicCamera();
camera.setToOrtho(false);

Now, setup the render method:

public void render(float delta) {
    camera.update();
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

    // physics updates

    Matrix4 cameraCopy = camera.combined.cpy();
    debugRenderer.render(world, cameraCopy.scl(BOX_TO_WORLD));

    world.step(1/60f, 6, 2);

}

The camera is being updated, and the screen being cleared. Then using a copy of the Matrix4, we pass that in to the debugRenderer, and modify it by the box to world ratio. The reason for this is so the fixtures and shapes you create onto the world are positioned as you want them to be. We then call the world.step, which progresses the physics with your game loop. The 1/60f translates to 60 frames per second. The second value is for velocityIterations, the second positionIterations. Ive been using the default values from the documentation listed above, and it's worked well for me. I haven't experimented with it much to tell you what's best.

Time to setup some actual objects! The game I've been working on is a sidescroller. So let's setup two things: a ground and a box representing a game entity. To setup the ground box and the entity box, we'll need to setup multiple properties:

private BodyDef groundDef;
private Body groundBody;
private BodyDef playerDef;
private Body playerBody;

Then initialize them like so again in the show method:

groundDef = new BodyDef();
groundDef.position.set(new Vector2((Gdx.graphics.getWidth() / 2) * WORLD_TO_BOX, 16f * WORLD_TO_BOX));
groundBody = world.createBody(groundDef);
PolygonShape groundShape = new PolygonShape();
groundShape.setAsBox((Gdx.graphics.getWidth() / 2) * WORLD_TO_BOX, 16f * WORLD_TO_BOX);
groundBody.createFixture(groundShape, 0f);
groundShape.dispose();

// the player box

playerDef = new BodyDef();
playerDef.type = BodyType.DynamicBody;
playerDef.position.set(new Vector2(100 * WORLD_TO_BOX, 400 * WORLD_TO_BOX));
playerBody = world.createBody(playerDef);

PolygonShape playerShape = new PolygonShape();
playerShape.setAsBox(50 * WORLD_TO_BOX, 50 * WORLD_TO_BOX);

FixtureDef fixtureDef = new FixtureDef();
fixtureDef.shape = playerShape;
fixtureDef.density = 0.5f; 
fixtureDef.friction = 0.4f;
fixtureDef.restitution = 0.6f;

Fixture fixture = playerBody.createFixture(fixtureDef);

playerShape.dispose();

There's a lot of code there, so here's a run down. The first bit sets up the ground body definition, the ground body and a shape to define its size. When making a static body that isnt effected by things like gravity, that's about all you need. Set the position to the center of the would be object. Since I wanted this box to be the width of the screen and 32 px high, I set it half the screen for x, and then 16px up for y. To fill the screen, I then setup the size. The setAsBox method accepts half height and half width values, so i devided the screen by 2, and specified 16 for the height. Once the fixture is created, and the shape is passed to it, we no longer need the shape, so it can be disposed.

The player def and body bits are fairly similar, however as you can see, it's being set to a dynamic body. The position and shape are setup in the same way as the ground, however in this case I'm creating a custom fixture. The custom fixture allows you to setup all the neat things like its density, friction and so forth. Restitution is float a value from 0-1. 1 meaning when it collides with a static object, it will bounce up back to where it was. I set it to .6, so it bounces by 60% of previous height. Play around with these to customize the feel of your game, and to find the right result you're looking for. Then after that the fixture is set, and the shape is then disposed. So long as you have the render method setup properly, you should see these objects when you run the program.

Well I hope this helps. Some of the camera stuff really bit me hard until I figured it out. If you want my full gamescreen.java code, it can be found here

If you run into any issues, feel free to post a comment, or hit me up on twitter

One Game A Month - January

At the beginning of the year, a new movement called One Game A Month kicked off. The idea is that each month you start a game, and complete it by the end of the month. The main idea is to encourage each other, and to grow your skills as a developer.

The game I will be building will be a simple medieval knight sidescroller game where you fight simple enemies, and a boss at the end to save the day. So far i have been building a bit of a skeleton app, and rendering some information from a Tiled map and creating some art to go with it. This evening I messed around with a trial of adobe illustrator, and managed to create some alright looking grass. Not sure if ill fork out the $20/mo for illustrator yet. Something like iDraw also looks rather intriguing.

Anyways, here's a screenshot:

gamescreen.jpg

Building a Rails Generator, and packing it into a gem

I started working on a generator that can get me started in a rails app for using MelonJS. Ryan Bates did a rails cast on creating one, and goes into more detail than I will if you need more specifics. However, you have to make sure you structure things correctly in your gem in order for it to be picked up.

You pretty much need to keep the same structure as given to you when you run

rails g generator melonjs

To create your separate project to work in, open your working directory, and add a lib/generators directory:

mkdir -p lib/generators

Copy the specific generator folder that you want from your rails project over, melonjs for example, and paste it in the newly created generators folder, so you have:

lib/generators/melonjs

You'll need to add a require statement to the top of the generator so it loads rails properly:

# lib/generators/melonjs/melonjs_generator.rb

require 'rails/generators/base'

At the root of your project directory, create yourself a gemspec file, giving it the name of your generator. melonjs-generator.gemspec.

Here's the contents of my gemspec file for your refrence. You may need to do add required files to the gemspec if you have things like a readme or tests:

$:.push File.expand_path("../lib", __FILE__)

Gem::Specification.new do |s|
  s.name        = "melonjs-generator"
  s.version     = "0.1"
  s.platform    = "ruby"
  s.authors     = ["Aaron McLeod"]
  s.email       = ["aaron.g.mcleod@gmail.com"]
  s.homepage    = "https://github.com/agmcleod/melonjs-generator"
  s.summary     = %q{A rails generator for melonjs.}
  s.description = %q{This generator will put the melonjs library file in your vendor assets, and configure the asset pipeline to load it for you}
  s.files = Dir.glob("{lib}/**/*")
  s.require_path = 'lib'
  s.add_development_dependency 'rails', '~> 3.2.0'
end

And now, simply package and install the gem:

gem build melonjs-generator.gemspec
gem install melonjs-generator-0.1.gem

Back in your rails project, delete that particular generator from the lib/generators directory, and add your new gem to the Gemfile like you would any other. Run bundle install, and then see if your generator shows up via:

rails g --help

Hopefully that gets you sorted in building your own generator. The source code for mine if you need a reference can be found here.

JRuby Slick

Thought I'd write a quick post about this gem I've been crafting. I released a first version maybe a month or so ago. Essentially what it does is provide you a really simple command line utility to download and extract the dependencies for using the Slick2d library, and sets up an example.rb file to load it in JRuby. There are some tasks for it to be complete though. For example the main slick repo does not come with x64 binaries. Not so much an issue on OS X, but it is on windows. So presently using the gem on windows does not work if you are using the a 64bit version of windows. You can still use it, but you will need to put the binaries in the bin folder manually. The binaries I refer to are for the LWJGL that slick uses. If you need to grab the x64 binaries, check out their download page.

Another problem exists in detecting the platform. I can detect windows for example, but currently there's no distinction between 32 and 64 bit, as i mostly just see mswin come up in the RbConfig::CONFIG['target_os'] value. Can see the repo for the gem here.

Feel free to make pull requests for the gem, as I'm not sure if I'll have a chance to work on it any time soon. To install it, simply run gem install jruby-slick. You can install it and run the gem in MRI, but just keep in mind that to run the app you will need to use JRuby since Slick is a Java based libary.

Recent projects & game development

Haven't posted anything in a while, so thought I would just maybe give some advice over general things I've learned lately, and perhaps some resource links :).

ClearCharity, the name of an application I built with another developer that goes on top of the Shopify platform. In short, it gives you the ability to publish a charity for a given period, so users can donate directly, or a percentage of your sales can be contributed to the charity. It keeps track of such information, and you can setup various milestones for automated social integration. This is about ready to go into beta for first release, and we have some ideas on how to take it further.

I recently participated in the LD48, which is essentially 48 hours to do a solo project of a game from start to finish. It was the first one I did, and while I didn't get very far, I learned a lot. For game development, I'm using jruby and the Slick2d library on top of it. Peter Cooper did an excellent job on a tutorial of how to get this going. It was a really simple game. You constantly fall. If you touch the lava, you die. You can click anywhere to teleport. If you kill an enemy, you gain 1 second of immunity.

Transient

Learnings from game development

Game development is tricky. It's definitely a very math-oriented style of programming, as you need to write more complex loops to solve problems, mathematical calculations for collision detection, drawing, physics, etc. But it's also a lot of fun. As I have made small improvements and added functionality to my games, I've found it extremely rewarding. If you're looking into gamedev but haven't done it much yet, definitely start small. Choose a platform you want to use, and sick with it. Use it to build games like:

  • Pong
  • Tetris
  • Minesweeper
  • Scaled down mario clone

The point is to keep scaling up in difficulty on what you can build. Even if the art looks like crap, I suggest making your own at least to get a feel on how to do it. For LD48, mine looked pretty awful, but it was fun learning how to use Pixen and TiledMap Editor.

Structure

Even if you decide to use mostly base language APIs and not a framework such as slick, or pygame, I recommend looking at one to see how they structure their code. Most of these have a few methods such as:

  • init
  • render
  • update

Init can often just be the constructor, but it's meant to run once when the object is initialized, or after the constructor is executed.

The render method is what draws everything. Generally using some sort of graphics object, you can draw various objects to the screen here. This is meant to be called in the gameloop, usually after update.

Update is essentially what updates the data for your objects. So if you have a ball bouncing around, its x & y values would change as necessary. It's important to pass the time in milliseconds past from the last frame to now to your update method. This so you can multiple your x & y values by that delta, so things move the same amount regardless of framerate. Most game libraries I've used handle this for you.

The game loop

The game loop is the main loop of the application that keeps things kicking. It usually starts when your main class or code is executed, and will go until some sort of escape and exit command is fired. This can be the escape key, closing of the window, or in text based games, a text command. Again, mananging the game loop is often delt with by various frameworks. SFML does have you write it out, but it's just a matter of writing a while statement based on the condition of a built in method.

As stated above, tracking the time difference between the last frame and the current one is crucial for smooth and consistent gameplay.

Resources

Some resources I use can be found here:

  • r/gamedev. Can't thank the community on reddit here enough. A lot of great posts and links can be found on that sub reddit. Great discussions on topics, tools, etc.
  • Simple games to clone again from reddit, but a great list if you want some alternatives for games to remake.
  • Art tools again credit to our good friends on reddit for putting this together. I use pixen on the mac, as I found it to have most of the features I needed.

Upcoming

I am working on a sidescroller in JRuby at the moment. Just doing the basics such as rendering backgrounds created in Tiled. Working on the jump algorithm at the moment. However, I'm considering getting back into something more web related: Sojourner. While that's a link to my dev blog, in short the game I was working on there is meant to be a browser turn based combat game involving ships and sub modules. While the screens I show there work well on desktop, the experience doesn't make sense at all in mobile. Most of the team members including myself have been busy, but I personally would like to get this going. We all maintain a pretty consistent contact with each other. The others I work with are mostly in the design and 3D design space, giving us a nice range of team members.

I try to keep that blog functioning for development over this one, but I can always post links on my twitter.

Resolving WiFi Issues at Denver International Airport (DIA)

On returning from Austin, TX for railsconf, I had a connection in denver. They have a free wireless network, and like most free public wifi, you will hit an agreement page when you first make a request in the browser. For whatever reason, it doesn't like to load in macs. So what I did was load up my computer in Windows, and grabbed the address of the web page that you need to hit to authorize.

http://172.30.0.2:8000/index.php

Just go to that address in your browser on your mac, accept the conditions, and that's it. Hopefully this helps another fellow mac user some day :D