Thursday, December 31, 2015

0820_01_2016

Here is my first sketch to color concept on phone. I've done some others but this is the one I like most.

Tools used

Adobe Draw, Adonit pro, sketchBookX

Friday, November 27, 2015

28_11_2015 drawing

Was trying my hand at drawing baby this was a very quick sketch .. about 15 mins max.. pretty happy with the result.

Sunday, November 08, 2015

LoL-Wars Mobile

I've been working on lol-wars for the mobile for a couple of days now. The gameplay is pretty much the same as the original html5 version, but the experience is what i've been working on.

The major problem with the html5 version was the use of firebase for handling the communication between the players and also to keep track of who is online. Frankly the code was all messed up and all over the place. I did however learnt how to use angular material and get familiar with the riot's developer api.

For the mobile version i've tried doing it with unity, quickly realising that i was spending way too much time without much progress. I was trying to figure out the gameplay flow while trying to figure how it's done and eventually the project got sidelined.

I still loved the idea but wasn't able to motivate myself to get it done in unity, so i thought to myself that getting the game done was more important to me than doing it in a particular tech. I needed this game to be available on mobiles. So i picked cocos again and this time i did the same mistake of trying to pick up new tech .. i.e the server side programming. I wanted to use netty so i get a good understanding of how its' done etc, but was too frustrated trying to set the machine up. I discovered a library for socket.io which is fantastic because some of the basic stuff required for a turn-based game are already provided, The best part?. cocos2dx has support for it..

After fiddling around for a couple of days i got comfortable with the Socket.io client in cocos, but the server was another beast. I finally reverted to nodejs. I initially wanted to try it out but backed out because of perf concerns but not any more.. the server can always change.. but i needed something working. So i went ahead and implemented the server in nodejs using the socket.io library.

I was quickly able to get the protocol decided for the game to work. I also quickly did a couple of state animations using cocosbuilder and got the screens ready for gameplay. Over the weekend i was able to find enough time to finally get the server and client up and running.

The problem now was to figure out how to host this server online so i can access it anywhere. I looked at a couple of options...
1) RedHat redshift
2) Windows Azure
3) AWS

I've spent about half a day trying to host the damn app on RedHat redshift service, but with no success. I mean i was able to get it running but was unable to connect to the server with cocos2d-x client. I didn't have the time / patience to figure out why. I tried looking for quick solutions but nope nothing helped. The server was up, the browser was able to connect to it but not the cocos2d-x client which kinda makes it worthless.

The windows Azure asked me for my credit card info and when i was checking it, i was confident that i would be able to get the RedShift thing work for me. But finally i had to give and pick the AWS Free Tiere option.

The best part of this decision was that i finished the setup and testing of the whole thing in about 20-30 mins time. Which is incredible considering how much time i spent trying to figure what was going on with rhcloud.com

Any way just happy that i was able to get this running. Next stop getting more polish in, and trying to see if we can make this look and feel better.

Saturday, November 07, 2015

Drawing Practice

Drawing 7-11-2015
i've been using mischief to practice drawing everyday.. i thought ill' keep posting the sketches for my future ref. So i can track the improvement if at all there is any.

Thursday, November 05, 2015

CodeGenerator for CocosBuilder

If you have used cocosbuilder editor for animating / creating scenes in cocos2d-x you would have realised that there is a lot of boilerplate code, the code that is pretty much always copy paste from something you have done before.

1) Initialising the member variables
2) Adding the member functions
3) Binding the member variables
4) Binding the methods to callbacks.
5) Loading the ccb file.

All this is pretty much the same for all the classes  you write for using cocosbuilder ui. I've done a bunch of work before parsing the ccb files but never occurred to me that i could write a script to generate the code.

That is exactly what happened when one of my colleagues exclaimed.. this is pretty much same code for every class why dont' we write a script for it..

Well that is exactly what i did and here is the git repo for it..

https://github.com/vkbsb/ccbClassGen

The usage is simple and will mostly work. I do believe this can still be improved and would like people to be able to use it.

Wednesday, October 28, 2015

Doodles 29-10-2015

some random doodles today... looks like i need more practice with the drawing tablet. 

Tuesday, October 27, 2015

Mischief

Found a new infinite canvas drawing tool for mac.. i was an avid user of mypaint, an opensource project which provides infinite canvas and is pretty good on windows and linux. On mac you will need to install macports which seems to be a little problematic .. as in i couldnt' get it to work when i tried today so i started looking for a native mac app.

I found a bunch of them but the one which is free and is pretty good to use is Mischief.
Here is a drawing i made in it, i used wacom bamboo to draw after a while, i used gimp to edit the exported png from mischief. Hope you like it.

Wednesday, July 22, 2015

Random face drawing

Wanted to experiment with simple face and this what I ended up with.

Sunday, May 10, 2015

LoL Wars Update

I've been planning on improving the lolwars game so it looks better on the mobile in portrait mode.
To get this done we had to redesign the card layout and also think about usability of the design for easily clicking on the stats that matter.

So Here are the designs i made for the cards


The idea was to try and keep the focus on the stats.. each of these designs has it's own merits but the important thing is to keep trying.. :)

Most of the Chinese artists.. use the red and gold combination and i love it, the fourth option is me trying to emulate that same color scheme.

I've learnt a bunch of things in inkscape recently and have been using them for the card design. Hopefully ill' get better at this.

Thursday, April 16, 2015

LoL Wars

Have you ever had a discussion about the game that you just played?..how about that awesome game where you took down a bunch of enemies or turrets..or provided amazing support to your team?

Well we have built a small trump card game with the data from the last couple of games that you played in league of legends.

We built this for the api challenge that has started recently, asking developers to build some apps using the api they provide to expose the user/game data to other apps.

You can see it in action here

If you wish to try it out..have a go at it.. Note that this is still a proof of concept with a bunch of use cases still not handled... You should be able to play with your friends without problems though.

You can play LoL Wars

If you would like to contribute to the project Head to github project

Tuesday, March 24, 2015

Godot H5 build

The Godot engine is a pretty good alternative for any of the 2D/3D open source engines out there. One if the features that got me excited about the engine was the Html5 support.
With one click of the button you can export the game onto any of the platforms android, iOS, mac, Linux and html5. The only problem... The h5 exporter didn't work right out of the box for 1.0 version of Godot.
I looked at it and was unable to figure out what was going on. I searched their forums, Facebook page and the only answer I got was that it was broken and that the devs knew about it.
The html5 exporter was based on emscripten. I downloaded the source code and tried to compile for h5. The platforms is described as JavaScript.
The compilation was working fine but linking not so much. It would report a lot of unresolved symbols .. The basic things like gd script were not working. I had to look up how scons worked. Had to figure out why the existing build wasn't working. ... Then I came across a bug report that said that the emscripten was too strict about the order of object files included in an archive and would straight out not include them.
The solution for this was to use the default .bc format output for creating archive  for emscripten compiler/linker.
I created a sample scons app to figure out how to change the build config variables and was able to get it to work. I quickly created a pull request for the build fix and posted it on Godot git repo.
I was able to learn scons and the emscripten both at the same time.

You can pick the godot build that works for H5 from here https://github.com/vkbsb/godot/tree/h5_canvas_polygon_fix

Friday, March 06, 2015

Flash animations in GoDot Engine


If you have not heard about GoDot game engine,.. you should check it out right away.. godotengine.org


Last time, i wrote a blog post about my experience making a simple physics game to GoDot Engine.
Though there are a bunch of free options announced during the GDC this year, i thought ill' contribute to the engine. The one piece that is most important for game dev is the pipeline for the engine.


One of the most common tools used for 2D animations is Flash. I have been using a library called Super Animation for almost all the games we've made for android at TMG. It's  a  free tool which lets you convert swf files to .sam files. This file can then be loaded in Cocos2Dx using the Open source loader library https://github.com/raymondlu/super-animation-samples

I thought it would be a good idea to port this cpp library to GoDot so that i understand how to write custom modules for the engine.


This is the video of the module in action. I have exposed the methods for basic operations like loading an animation file, Playing a particular animation / pausing it etc. 

I still want to add a bunch of editor related things but i think its' in a state where i can share with others and see if i can find more contributors.

The module is hosted at https://github.com/vkbsb/godot_sam





Saturday, February 21, 2015

GoDot (Dont Touch Spikes)


Last time i basically explained what it felt like using the GoDot engine gui while i was creating the simple game of Dont' touch the spikes. In this post i will cover how i went about setting up the scene and issues i faced.

The Scene Setup

Coming from cocos2d-x i'm used to Layers, Scenes as container objects to setup a gameplay scene. In GoDot however i was unable to find any such nodes. Instead i just had to use a Node2D. This is pretty much the starting point of the game scene structure.

I then added a RigidBody2D named it Player. This was going to be the physics body for dealing with user inputs etc. I then added a Sprite to the RigidBody. If you have used unity you would start wondering where do i add the collisionbox component to the rigid body. Simple answer is .. you dont. You actually have to add a node called CollisionShape2D as a child to the RigidBody2D to be able to detect physics collisions in the simulations. So the Scene tree looks like this:
Player Setup
There are a bunch of things we need to start setting in properties panel corresponding to the Payer Object (RigidBody2D object) to be able to get callbacks for collisions when this body collides with static / kinetic physics bodies.
Options to set on RigidBody2D
The Mode is set to Character so that the rigidbody doesn't rotate on collision. It will just use the velocity and not the angular velocity. The Contacts Report and Contact Monitor ensure that we are able to get callbacks for collisions with kinetic objects and the static objects. There is a warning about this being performance drain but its' required in this case. Now let's get to adding some game logic / input handling with

Once this is done, I setup static objects for top wall, bottom wall, left wall and then the right wall. These help us keep the object inside. The spikes that are in game are added as KineticBody2D. The spikes setup is a little complicated, ill' cover it in detail when i cover the animation. The one important thing that we do for spikes is set their group name. This will help us in the collision callback.
Full Scene Graph
Roughly speaking each wall has spikes associated with it. The spikes on the leftWall and rightWall have the spikes that animate and so they look a little more complex than the Floor and Roof objects. The one additional feature i used for handling spikes is Group Name this will enable us handle the collisions easily across multiple objects.

Scripting



Adding a script to a Node is Easy
With a node selected, click on the Edit/Create the node Script button in the scene graph panel. Once you provide the details like filename, file path of the script, you will be taken to the scripting window.
Scripting Window with Stuff filled in
The above screenshot is way ahead in the development.. when you create a new script you will just see something like this
       
#the script associated with a RigidBody2D node.

extends RigidBody2D

# member variables here, example:
# var a=2
# var b="textvar"

func _ready():
    #initialization happens here
    pass


As you can see the _ready function is the initialization function that is created by default. its' like the OnStart function in unity behavior scripts. To get callbacks on each rendered frame i.e OnUpdate function from unity you have to call set_process(true) this will make sure that you get calls to a function named func _process(delta):  this will be the equivalent of the update functions in other engines like cocos2d-x or unity.
#the script associated with a RigidBody2D node.

extends RigidBody2D

# member variables here, example:
# var a=2
# var b="textvar"

func _ready():
    #initialization happens here
    set_process(true) 
    set_fixed_process(true) #callback on each physics update.
    set_process_input(true) #enables input handling
    pass

func _process(delta):
    #callback on each frame render
    pass

func _fixed_process(delta):
    #called after each physics update cycle.
    pass

func _input(event):
    #called on any input event.
    pass


Now that we have access to the update cycles and the input events, lets' have a look at how we handle the physics collision callbacks. This is done through node connections. It's basically a observer pattern implementation similar to the one seen in Toolkits like Qt.
Node Connections Button

There are a bunch of predefined signals for each node type in GoDot. You will be able to see them listed in the connections window when you click on the connections button in the scene graph panel.

Signal List
This window shows all the signals that the selected node can emit, once you click connect you are taken to another popup shown below.

Callback selection window
Here you select the body that will receive the signal and the function for callback when the signal happens. If you leave it default settings, the callback function will be automatically added to the script associated with the selected node. So now the modified script looks like this
#the script associated with a RigidBody2D node.

extends RigidBody2D

# member variables here, example:
# var a=2
# var b="textvar"

func _ready():
    #initialization happens here
    set_process(true) 
    set_fixed_process(true) #callback on each physics update.
    set_process_input(true) #enables input handling
    pass

func _process(delta):
    #callback on each frame render
    pass

func _fixed_process(delta):
    #called after each physics update cycle.
    pass

func _input(event):
    #called on any input event.
    pass

func _on_Player_body_enter( body ):
    #your implementation goes here. this is called whenever 
    #Player object collides with another object.
    pass

In this case i selected the body_enter(Object body)  signal from the Player node in the scene and connected it to the same node so i can handle the collision response in the same script.
This says that the signal will also emit an object of type body which is basically the handle to the object that is collided with.


Custom Signals

As i mentioned earlier, the signals / connection mechanism is very useful for communicating between multiple game objects. In this game i used it to notify the walls when ever there is a change in score to change difficulty. This enabled me to decouple the difficulty of spikes from the player handling / game handling code.
#the script associated with a RigidBody2D node.

extends RigidBody2D

# member variables here, example:
# var a=2
# var b="textvar"
var gameScore = 0

func _ready():
    ....
    #setting up signals supported by the object.
    var argument = { "score" : TYPE_INT }
    var ArgumentArray = Array()
    ArgumentArray.append(argument)
    #add the newly created signal to the list
    add_user_signal("ScoreChanged", ArgumentArray)
 
    #signal handling for bg color change based on score.
    connect("ScoreChanged", get_node("../backgroundColor"), "updateColor")

func _on_Player_body_enter( body ):
    #your implementation goes here. this is called whenever
    #Player object collides with another object.
    var name = body.get_name()
    if name == "LeftWall":
        gameScore += 1
        #trigger the signal that score has changed and send parameter.
        emit_signal("ScoreChanged", gameScore)
    elif name == "RightWall":
        print("Turn Left")
        gameScore += 1
        emit_signal("ScoreChanged", gameScore)

With all these things in place i was able to quickly develop the Dont' touch Spikes game in about two days' time. Most of the time i was just searching through the documentation and tutorials trying to understand the basics.

I've uploaded the code to github so you can directly download and try it out.
https://github.com/vkbsb/godot_dts



GoDot Engine

GoDot is an OpenSource 2D/3D game engine.
There isn't any shortage of game engines these days. It's just a matter of preference and getting the pipeline ready for that engine that takes a while. I've been using cocos2d-x for a while now for most of my 2D games.

GoDot Engine GUI
But Iv'e been thinking about using a GUI based integrated Game engines for future projects so the obvious choice was Unity engine. Its a pretty stable platform and has a bunch of plugins for every thing you want to do, and is pretty much the gold standard for mobile development. There are still a couple of things i still don't like about it.. which includes the lack of control and large build size.. well if something isnt' working.. there is no way for me to figure out if it was my code issue or something wrong in the engine. The community is almost always there to help but its' not a guarantee. I was still searching for an engine that would be easy to use and would give me the full control.. thats' when i came across the GoDot Engine.

Some of the features i love about GoDot Engine

  • Python based Scripting
  • C++ for core extending engine
  • exports to Html5
  • OpenSource
  • An integrated GUI env for game development.
Why not Unity?
As i tried to evaluate its' usability i quickly realised its' not yet ready for mobile game dev, let me explain.. integrating with 3rd party libraries like ad networks is pretty scare at the moment on godot engine. And there aren't many plugins available like there are for Unity.. so if you are ok with paying for the engine licence and need a stable dev platform for mobiles.. Unity is still the right choice. 

But i like the control that open source engines give and did i mention its' all free?.. it might be a little tricky to use but if i were able to use it for creating games and figure out how to do the integrations required, this could become the engine of choice for me.. So i soldered on to figure out how the engine works / learned the scripting over the weekend and tried to build a small game quickly.

The Game
The game of choice was ofcourse a popular game called Dont' touch the Spikes.
I am a big fan of the game and i figured it would be cool to try and use GoDot to create the game. So here goes the experience. 

The GUI
The gui is kinda hard to get used to at first but lucky for me there are a bunch of wiki pages explaining everything in detail and also some you tube video tutorials as well .
Here is the link to the youtube channel which helped me a lot.



The SceneGraph
GoDot has a scene graph structure similar to cocos2d-x, There are Nodes, Sprites, AnimatedSprites and so on. so if you have worked with cocos2d-x you should be able to pick up this engine pretty quickly.
Here is how a scene graph would look in the editor.. 
Scene Tree
If you are making a 2D game there is separate view from the 3D window, just like in Unity engine. 

The Scripting
The inbuilt scripting window is pretty cool, the amount of documentation is comparable to what unity has, this in combination with wiki on the project git hub page you will not have trouble getting through any scripting trouble you might face.. 
The Scripting Window
As you can see, the help is built right into the editor. With the auto complete in the editor and the documentation right there, scripting is a pleasant experience. For communication between objects, there are multiple ways
  • Call functions on objects just like in Unity
  • Signal / Connection method.
The Signal / Connection method should be familiar to anybody who has worked with Qt's Signal/Slot mechanism. Basically the observer pattern that is easy to use :) 

The Animation Editor

GoDot engine has a built in animation editor, with timeline and ability to creating multiple animations. This looks and feels primitive, but i was able to achieve the required animations for the game. There is a UI overhaul planned in future may be it will become easier to use then. 

I'll go through the tutorial of how i made the game next time .. :)

Update:
Here is the basic tutorial for how to get Don't Touch Spikes game built in Godot.
http://gizmothunder.blogspot.in/2015/02/godot-dont-touch-spikes.html

Sunday, February 08, 2015

2D Soldier

One of my friends had designed a simple 2d character that we wanted to use for a game. As one might expect.. it never got realised. So I thought ill' put up the asset for use by others who might be interested.

This is how the animation will Look

135x240 pixels each piece

I used blender to create a rigged model with the body parts as rectangles, then texture mapped it. 
Animation and rendering were done using blender. 
The final step of creating spritesheet was done using Gimp.