Thursday 30 March 2017

Use prototype to illustrate your UI design

It is always good if you have the chance to test out the user experience during design stage.

A prototype design specially for design does not require the same amount of consideration on back end hook, however, you can develop  quite a lot of reusable components which can be easily modified into a production components.

Here's a User interface prototype I made. Similar to the final product the prototype is using MCV design pattern to implement, although most of the contents are in the View. Please find the distributed exe file and some of the source code in this following link:

ui prototype and source code






Friday 24 March 2017

Let's steal chickens! - chapter one -chicken chain

Do you remember the old Mario game on GBA that the little green Yoshi taking a long queue of egges and throwing them at the enemies?

I was having a lot of fun of collecting different colours and types of eggs.


I am making same feature in my game in an evil version (evilly smile)

So what's this feature about?

Instead of collecting egges, you collect little birds. You will be able to steal eggs from their mother bird. When your hp is low, you eat them to gain hp (poor chickens!).

Let's take a loot at our chicken in close!


The mother bird is able to generate chickens who follow their mom. When the player attack the chicken, the chicken will be stunned.  Then the player can steal the chicken. The chicken starts follow the player.

To achieve the effect of chicken chain, the chicken need to follow her [target] either the previous chicken in the chain or, if there's no previous chicken, the player or mother bird.

This means, in the chicken class. There will be a Gameobject_target and a function setTarget(). The target need to be set when the chicken is created. setTarget() function can also be useful when the player is trying to steal her from the mother bird.

With the target set, the chicken chain movement will be easy, the chicken class constantly test the distance between it's target and itself. If the distance is larger than a threshold, +the chicken walk towards it's target.

Here's the effect of chicken chain!


Fun to look at , lol!

Here is the movement class of the chicken.

The following step will be create a simple movement for the mother bird , allow the mother bird to spawns chickens over time.


Thursday 16 March 2017

Python tool : create texture atlas

This is the python tool I made to create texture atlas using python.

It is normal to pack multiple textures into one to reduce the draw calls. 

To avoid doing copy and paste the images one by one in photoshop, I wrote a python tool to do it by one click.

This tool is written in Python 2.7 and PIL. It pack all images of the same size into one atlas. As a result, you will have multiple image atlas in a new created "out" folder that locates in the same folder as the original images. The number of image atlas depends on how many different sizes you have for the original images. 

Here's how you use this tool:

Prepare: 
The tool will need python 2.x version and PIL package installed.
Copy the folder [createArrays] and file [runCreateArrays.bat] into the image folder

To run the tool:
1.double click    runCreateArrays.bat 
2.enter CreateArrays.py in the command line tool


About the tool:
By default, create Texture atlars for same size images that are located in the same folder
with [createArrays] and [runCreateArrays.bat]. 

But you can also target another image folder by using   
CreateArrays.py -sp
In this case, the tool will allow you input the absolute path for the target image folder.
To be notice, if the default image folder does not contain any image files, you have to specify
a valid folder to conitue.
By default the output name will be OutputName_size.extension. You can change the name by using
CreateArrays.py -o imageName

The output files will be located in a [out] folder that is created in the target image folder.

Thank you!


you can download the tool here 

Tuesday 7 March 2017

Apple chip 1

I am planing on a small 3D puzzle game using Unity on mobile platform.

The main idea is bringing 3d puzzle into a game.

The game will work like this :

Player get pieces of a whole 3D model by finishing tasks.
The player's aim is collecting the pieces and organize them in a correct order to build a finished 3D model.

There are a few features I am thinking making to enable the game play.
1. Player should be able to rotate the world.
2. Player should be able to drag the piece around on the screen.
3. Player starts with one piece,  this is consider as the main part (MP).
3. When the piece is on its correct place, the piece should be added to MP.
4. When all piece in places, level clear.

Break down:
1. when not clicking on the pieces, rotate camera. Maybe not rotating along Y axis because I don't want the player flip the world up side down.
2a. The pieces and the world :To make things easier, world are cut into 1*1*1 grid. If you give the pieces box boundaries, all the box boundaries are in the same size. Thus I can use a 3d coordinate system to locate where the piece is related to MP (0,0,0).
2b. Move and grid snapping. When moving pieces, piece snap to the grid on axis that it is moving. The wanted axis and direction should be detected by velocity on (x,y,z) use the max one as the target axis. (2d screen coordinate transfer to 3d world coordinate and then check x,y,z)
3.there should be a array recording the MP.