Quakeboy'z Dev Arena - Get development tips for free!

If you like the contents that are written here, you should subscribe to stay in touch and get updates.


There are some people who are developers with good design skills and an eye for detail. I have worked on myself to be more like that person over the years. I am one of those awesomesauce developers that designers love to work with - Find out more...


10 productivity tips to not give up on your game project

Comment
These tips are not just for game development, this applies to almost anyone who wants to create stuff and can apply to any project in your life.

ExtraCredits is a really good youtube channel for anyone who is interested in making games. Today I saw this video on their GameDesign playlist. It gave some amazing tips as listed below. This is just a summary for those crazy people who prefer reading instead of watching videos, like me :)

1) Don't plan a project that will take you more than a month
This is a great point. After years of having dropped projects, prototypes and trying to do too many things, or everything that excites me at the moment. I guess this is a must follow.

2) Its gonna take you more than a month, if you plan for a month.
Haha, yes, so true. But don't panic, but if you hit 3 months, its time to revisit.

3) Don't spend too much time designing
Don't spend too much time designing stuff you don't know if you can build yet. Experience is way more valuable than end result at a beginner level game designer, indie experience.

4) Set milestones - every week
This is going to be a deal breaker if you miss it. It is so important to keep track of how good your estimation skills are, and how much time you actually can dedicate for your project.

5) Break milestones - if something takes more than a week, break it into smaller ones.
The main advantage of this is already mentioned in the previous point, but a more important advantage is you feeling closer to the end result and having a sense of momentum and progress.

6) Send yourself producer emails - what you did, and what you plan to do this week
This is what makes points 4 and 5 valid and trackable, and as you progress, imagine being able to look back at your own reports and learning from your production experience.

7) Review the game at least once a week
Just 30 mins will do. It is easy to forget where you are especially, if your day job or school gets in way. Warning : Its really common to let 2 weeks slip by - and MOST people give up when that happens due to a feeling of no progress gets in your mind.

8) Don't worry about production values - looks, sounds good is not as important as you think
Because these are distractions truly, until you ship a couple of titles out on the web or any platform. There are tons of games which look ugly and still has a player base.

9) Don't spend more than 1 hours, trying to do anything yourself
Stuck? - above 1 hour - look up tutorials/existing solutions. You don't want to learn to build everything. If you do, time to think, do you really want to build games, or just understand how things works and become a specialist.

10) Make people play your game, early and often to get feedback, doesn't have to be complete
The best advice I got for this point is from this article by 2dBoy.

Personal notes - This is specific to only certain cultures. Most of your friends will not give you honest feedback to not hurt your feelings, especially if you are a little "pussy boy nice guy". Most people might leave your game in 10 seconds, if you were not standing behind their shoulders. So playtest it with kids, or people who you don't know etc. And don't be too nice when you ask them for it, because you will make it awkward for them to say no, or say negative things.

So a very valid place to find feedback is on the internet. Here is where things get tricky, its really good to be hated than being ignored. And most people on the internet have very low attention span, so the game that you put months of effort into is just another free game for them. And it is not their fault, it is your responsibility to catch their attention in the first 10 seconds and hold it.

And you will be ignored. A lot! Especially if you put the game to the wrong audience, which is what marketing is all about. So make sure you don't get disheartened because you barged on this facebook group just to promote your prototype and everybody didn't just play your game immediately and give feedback, stopping everything they are doing in their life.

Happy game making :)



Game development live blogging - Part 2

Comment
Alright yesterday I left a body-less snake alone in Part 1.

Today I am going to make it attach with its body, and have you test-drive the snake in the editor, even in "Edit mode"... Fancy! I know, that's one of the strength's of Unity3d's editors.

Recap : So far, in the editor, edit mode, I am able to drag the snake's head GameObject, and snap it to the grid. Now its time to link them together.

video


Usually in the past, I always hold them all in a single array like data structure and keep updating their position using code, by shifting their position data from head to body 1, and body 1 to body 2 and so on. This time I am going to try a new approach. Let's do it the Unity3d's way.

First I am going to declare a new variable called "nextPart" of type SnakePart. I realised, each part's responsibility is only to pass its old position to the next body part. This will be a chain effect and the entire snake will move. Also we never use the body part's position in any snake game, except for to check collision between head and all of its body parts every time the head moves.

Added this line to SnakePart.cs script
public SnakePart nextPart;

Now the editor inspector looks like this

Now drag and drop, body1 to the next part. Do the same thing with body2 and drag and drop that GameObject onto body1's SnakePart script. Now the link is formed. For the sake of aesthetics, lets make more body links, by copy pasting the existing body parts. Highlight "body2"on the hierarchy window and pressed Cmd + D until I see body3, 4 and 5.

Now to drag them all as a snake, I need to pass the previousX and Y position to the nextPart of each SnakePart until nextPart is null. Also I am going to remove the code in Start() method, as I assume the snake body locations will be setup correctly in the beginning due the snapping feature.

So I introduce a new public method called SetSnakePosition(), and use it to set the position.
public void SetSnakePosition(int x, int y)
{
if (x != this.X || y != this.Y)
{
if (nextPart != null) nextPart.SetSnakePosition(this.X, this.Y);
this.X = x;
this.Y = y;
}
this.transform.localPosition = new Vector3(this.X * gridConverter, this.Y * gridConverter, 0);
}
The above code does two things, it updates the position of the linked snake part behind the current part & it sets the correct localPosition by converting grid co-ordinates into world co-ordinates using the gridConverter scaling value.

In next part we will do more exciting things in the snake and get it to move using the method we wrote above.

Application could not be verified, when installing app to iPad Air

Comment
Solution : Delete the existing app on the device and try again.

Note : You don't have to do this all the time. It happens only when a version of the app is installed from the AppStore or from an Ad-hoc source like Testflight.

I hadn't seen this error before, but it happened to me on XCode - version 6.3.1 (6D1002) with an iPad Air. But around the internet it seems to happen to iPhone 6 and 6 Plus too.

Game development live blogging - Part 1

Comment
I'm starting a project called "Snake On Acid" using Unity3d engine. Its the classic old Nokia snake game, but with all the game development magic I have learnt so far in my career.

It is going to have what I believe are some interesting time based twists, amazing sound and flashy graphics with lot of juicyness! Much in line with super hexagon's style.

Lets start..

I have setup a basic project with some graphics inspired from Neave snake. I hope to change the graphics later. I have a "gameboard" background graphic object (with sorting layer : background), a snake game object with three snake body objects (sorting layer : foreground) and a main camera object.

Oh I also have Demigiant's DoTween plugin added to the Unity project. There's going to be some amazing tweening :)

Now to make the snake move, but with some tween magic. I am going to focus only on the head snake object and attach a script to the body. Body part will be a prefab, and will be replicated at run-time. They might behave like a link-list.

Object called "body0"is going to be my head. Also I need measure my gameboard units. Looks like each snake body part is 0.22 units in size. Hmm, I would want my top-left to be 0, 0 for my snake grid. Right now the center is 0, 0.

Here is the setup for snake's head object
Now I am going to move the background so that 0, 0 is at the top-left.
Oops, the camera seems to have shifted. So I'm going to UNDO. Then add the camera as a child to the gameboard object, and then move the gameboard.
BINGO!

Now to fix the awkward snake head ready to bash the wall problem. If I start the game, and the snake moves left, it would die immediately. I will need to measure the width and the height in grid units soon. For now I will focus on moving the snake elsewhere.

Okay I moved the snake's head down, and oops, I notice that downwards is negative y. So I'd rather have bottom-left as 0,0. I like the right as +X and top as +Y.

I moved the snake head as top as possible, the Y value was 3.29. Now 3.29 / 0.22 (height of snake body) is 14.95, I could try to make 15 units. So 0.22 * 15 is 3.3. Let us see if 3.3 goes outside the border. 

Nope it seems to be perfect. Lucky me. Hope the same happens in X axis. Lesson learnt, next time, make the graphics to scale and proper units.

Now to check the X axis as planned. Let me drag it as far right as possible. Its 24 units measure with the same technique as above. So there it is my gameboard is a 24 x 15 grid.

Alright now to define some basic scripts and move snake body, starting with head. I'm choosing the head and placing it in the middle of the board (12, 7)

Now I will add a new script component called "SnakePart.cs" to the snake head. I am adding some variable as needed.
private float gridConverter = 0.22f;
private int maximumX = 24;
private int maximumY = 15;
public int X;
public int Y;
Now gridConverter is 0.22 because snake width and height is 0.22f. Next I need to place the snake in the right position on Start()

void Start ()
{
this.transform.localPosition = new Vector3 (X * gridConverter, Y * gridConverter, 0);
}

Next it would be nice to drag the snake's body and snap to grid in the gameboard. That would be cool. I remember there used to be a script attribute called [ExecuteInEditMode]. I am going to add that to the top. Then I need to write some code inside Update()

void Update ()
{
this.X = Mathf.RoundToInt (this.transform.localPosition.x / gridConverter);
this.Y = Mathf.RoundToInt (this.transform.localPosition.y / gridConverter);
this.transform.localPosition = new Vector3 (X * gridConverter, Y * gridConverter, 0);
}

Notice how I have repeated a line in Start() and Update(). I will refactor that later if needed.

Here is the final script

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class SnakePart : MonoBehaviour
{
private float gridConverter = 0.22f;

// private int maximumX = 24;
// private int maximumY = 15;

public int X;
public int Y;

// Use this for initialization
void Start ()
{
this.transform.localPosition = new Vector3 (X * gridConverter, Y * gridConverter, 0);
}
// Update is called once per frame
void Update ()
{
this.X = Mathf.RoundToInt (this.transform.localPosition.x / gridConverter);
this.Y = Mathf.RoundToInt (this.transform.localPosition.y / gridConverter);
this.transform.localPosition = new Vector3 (X * gridConverter, Y * gridConverter, 0);
}

}

In the next part, I will link the snake body, enjoy dragging a live snake in edit mode. For now I love how I can do that with snake body already.

P.S. I have commented the maximumX, and Y because it gives compiler warning. I just can't stand it! Will use it when needed later.

Dependency Injection - Simplest tutorial ever!

Comment

I have been hearing about Dependency Injection often. So I googled and found this very useful post by James Shore. The article begins with the below excerpt.

When I first heard about dependency injection, I thought, "Dependendiwhatsit?" and promptly forgot about it. When I finally took the time to figure out what people were talking about, I laughed. "That'sall it is?"
"Dependency Injection" is a 25-dollar term for a 5-cent concept. That's not to say that it's a bad term... and it's a good tool. But the top articles on Google focus on bells and whistles at the expense of the basic concept. I figured I should say something, well, simpler.

Read the rest of the article here

Storing and retrieving AS3 'Class' in SharedObjects

Comment
I recently wanted to store and retrieve AS3 Classes in SharedObjects. This could be particularly useful when dealing with an embedded resource. The key functions which help you achieve this are getQualifiedClassName getDefinitionByName


Bejeweled, Candy crush like Match-3 game clone source code jam

Comment
Today I had to make an assignment for this company I had applied for. After passing round 1, the second round was an assignment. The task was to make a clone of Bejeweled which auto-plays itself, until no more matches can be made.

The game can be stopped using a button or when no more matches are available. When it is stopped either way the user can click on any 3 gems to convert it to a wildcard gem. So the game can be played forever without any end.

The whole thing took about 5 hours, with about 40 mins break in between and few other miniature breaks. I have always wanted to participate in game jams and make a time lapse video, so I took this opportunity and made one.

Also I am giving away the source code on Github. It is made with Starling framework using AS3, so it should be portable to iOS, Android, Mac, Windows and Web without any hassles.

Screenshot




Play online
Click here to play the game online (hosted on my Dropbox)
https://dl.dropboxusercontent.com/u/1389278/Assignment/bin-debug/AutoGems.html


Source code
The source code is available on my Github. It has a 5 x 5 grid, but position and dimensions of the grid and dimensions of the gems can be changed easily as I have used const variables at the needed places.

https://github.com/quakeboy/Bejeweled-Clone


Time-lapse Video
Check out the time-lapse video below to see how I coded the whole thing



References
How to make time-lapse video
How to install ffmpeg on Mountain Lion

What are the best fonts for programming ?

Comment
Good page with example and screenshots. I am about to try Ubuntu Mono.

http://www.slant.co/topics/67/~what-are-the-best-programming-fonts

Testing your Flash AS3 games simulating slow internet connection

Comment
Flash IDE used to have an option where you can test your flash movie with different kinds of modem speeds. It was very useful to see how loading external resources worked, for testing some funky pre-loaders I made back in those days.

Today I had to test my AS3 game which I coded with Flash builder 4.6. Finally after some work managed to test the preloader I created based on this article.

Here are the steps I followed (Works only for Windows, tested with Chrome)

1. You need a web server. I didn't want to download and install anything huge. So search for a portable as small as possible web server and found something called MicroApache.

= Download it from here = (click File > Download after the page loads)
Then run it by clicking on go.bat after extracting it somewhere, anywhere.
Test it by typing http://localhost:8800

If that link gets taken down in the future you have other alternatives
http://httpd.apache.org/
http://www.aprelium.com/downloads/
http://www.brswebweaver.com/

2. Once you have a working webserver, put your bin-debug or bin-release folder where it seeks the contents. In the MicroApache, it was a sub-folder called "www"

3. Next download Fiddler2. Launch it. Go to Rules > Performance > Simulate Modem Speeds

4. Now open the following link in your browser
http://<yourmachinename>:8800/bin-release/<yourgamehtmlfilename>.html

You have to use the machine name, not the IP address or localhost for it to work.
Let me know if there are any questions.

Porting my AS3 game (engine) to Starling

1 comment
I started working on my first Indie game really long ago. Probably even before Stage3d was announced. But my day job kept me busy and the development happened only on and off. Here are a few details about it

  • - Has a resolution of 720 x 480 (3:2 aspect ratio, had old iPhone screens in mind)
  • - Not based on Blitting like Flixel does. I used the display list.
  • - A lot of procedural artwork with AS3 filters, but with cacheAsBitmap enabled.
  • - Heavy usage of  'Graphics' class, to create the elements via code.
  • - Also has usual PNG frame animated graphics.
Having worked on Robokill for the iOS, I got to read a lot of the original AS3 code. But little did I realize that even though that game had a resolution of 800 x 600, had lot of graphics and still ran smoothly, that game was designed in such a way that not the entire screen needed to be redrawn each frame. It never had parallax scrolling backgrounds, or full screen effects. It was written with a home-grown AS3 game engine and was not based on blitting like Flixel was. This is what influenced me to make the decisions for my game too. Everything went well until I added scrolling parallax backgrounds and the sound effects, then the frame rates dropped below 30 FPS. I realized my game was like a full blown platformer without tile based graphics, even though it looked deceptively simple to the end-user.

This is how it looked

Green/Red blocks are all created with code. There were more elements not shown in this level which made use of 'Graphics' class. I also had a few particle systems (again, based on display lists only). The top pole like element, the stars and the cube (square) in the middle are all animated and were loaded from images through Embed tags.

After I reached the FPS problem, and spending hours with the Flash builder profiler, I realized I needed to find a different solution, and it was a shame that I wasn't informed well about Stage3d. As AS3 development was not my full-time day job, I wasn't really updating myself on these new technologies. But after reading a little I could see Starling could be my saviour. The fullscreen demos looked great and ran at terrific speeds. But all the HUD, Buttons, Menus were all directly loaded from SWF, there is no way I can completely rely on Starling/Stage3d only. A post from Adobe knowledge base even recommended using the usual AS3 stuff for HUD and UI elements from the SWF on top of Stage3d graphics. So I finally created a new branch on GIT for the process and started!

Some relevant information about my so called Game engine

My basic gameObject class equivalent (which I called BasicThing) wasn't derived from Sprite. Instead it held a Sprite reference inside it. This was done to support some form of components based model. Each BasicThing held the following

  1. A Bitmap object to hold the current frame
  2. A Sprite object called m_container (used as the parent for everything under the BasicThing, including the bitmap) with protected scope. And a "get skin()" method which returned that.
  3. Getters and setters for x, y, width, height
  4. addChild(BasicThing), removeChild(BasicThing) - both of them added, removed m_container of the parameter as the child of m_container in the current object.
  5. Also a setFrame(int) and setFrames(Array) - Array used to be filled with BitmapData objects
Those were the main function, and like you see it had a lot of AS3 class dependencies like Bitmap, BitmapData, Sprite. Also whenever I subclassed BasicThing for various game entities, I loosely accessed m_container and added children to it like
public class CubeThing extends PhysicsThing
{
public function CubeThing()
{
super();
bd0 = (new Embeds.whitecube0_png() as Bitmap).bitmapData;
var bd1:BitmapData = (new Embeds.whitecube1_png() as Bitmap).bitmapData;
var bd2:BitmapData = (new Embeds.whitecube2_png() as Bitmap).bitmapData;
var bd3:BitmapData = (new Embeds.whitecube3_png() as Bitmap).bitmapData;
var bd4:BitmapData = (new Embeds.whitecube4_png() as Bitmap).bitmapData;
bdframes = new Array(bd1, bd2, bd3, bd4);
this.m_sprite.x = -12;
this.m_sprite.y = -12;
this.frames = bdframes;
this.setFrame(1);
}
public function cubeReset():void
{
this.skin.visible = true;
this.skin.alpha = 1.0;
}

In the above few snippets you can see how I have this horrible habit of breaking so many oops rules. But as a game developer I believe, you often just have to focus on getting it done than worrying about code structure and rules if you want to be really productive.

Also I had a BasicScene class extended from BasicThing, which served as the GameScene. And a SceneHolder class which took care of handling events and passing them down to each scene, attaching stuff to the flash Stage, taking care of transition when changing scene etc.

Keeping the factors discussed above, I had the following goals in mind

  • - I wanted to support both normal AS3 classes and Starling classes in each BasicThing (gameObject)
  • - The porting process should be progressive, I should be able to convert individual object to use Starling classes and see the output immediately to verify that part alone.
  • - Which essentially means existing code shouldn't be disturbed much.
So that way I could stop when the necessary performance has been achieved and simply leave AS3 classes for the rest of them to save time.

The Starling-ification

First thing I did was modify the BasicThing class

1. It had both an AS3 Sprite and a Starling Sprite like this
protected var m_slsprite :starling.display.Sprite = new starling.display.Sprite();
protected var m_container :flash.display.Sprite = new flash.display.Sprite();
 
public function get slskin():starling.display.Sprite
{
return m_slsprite;
}

public function get skin():flash.display.Sprite
{
return m_container;
}

2. When adding and removing BasicThing children, I added and removed from both skin and slskin. Also the setters of x, y on BasicThing modified both skin and slskin. This way both of them co-exist peacefully.

3. Replace AS3 "BitmapData" with Starling "Texture". Replaced AS3 "Bitmap" with a combination of Starling "Image" and "Sprite" classes. This was done because, there were cases where I had the Bitmap created and added as child without any BitmapData in it. With Starling Image you had to definitely pass a Texture when creating it.

4. When setting frame, I assigned the Texture from the Array to the Image and called readjustSize each time.

5. Apart from this, in each class instead of creating Bitmap using somthing like "new Embeds.CubeSprite", I created a Starling Texture directly.

6. But I made a Caching factory for Texture through which I could load Starling Textures like this - TextureLoader.getTexture( Embeds.CubeSprite)

7. To handle the Stage attachment, I made a empty singleton StarlingHolder which extended from Starling Sprite, just to serve as a container for all the Starling content in the game.

public function BasicSceneHolder(stage:Stage)
{
super();
var _starling:Starling = new Starling(StarlingHolder, stage);
_starling.stage.addChild(this.slskin);
_starling.start();
this.m_stage = stage;
m_stage.addChild(this.skin);
}

P.S. BasicSceneHolder extends from BasicScene which extends from BasicThing. So it has a skin and slskin.

8. The final thing left to handle was converting the procedural content which made heavy usage of Graphics classes. I wanted to be sure I could do this, so I set out to make a quick sample to test it. Let me explain the process in detail in next section

Bringing Procedural content into Starling

For making the test sample this I took help from one of Tony Broyez old blog post (link seems down, lucky me, don't worry I made a gist for it!)

https://gist.github.com/quakeboy/7066901

After that I used the same code to convert what ever I draw with AS3 Graphics to Starling Textures. Feel free to comment and ask questions I would be glad to help.

Oh BTW, this is how the game looks now, in a land where AS3 classes and Starling classes live peacefully together with three layer starfield parallax background thanks for ScrollImage extension by Krecha, and cool particle effects thanks to another extension by Daniel to support ParticleEditor by 71squared.