How-to realize a 2D game idea: Graphics and Physics

[Defcon12]

Hello!

 

In my job i am programming database tools, but i never had s.th. to do with game development.

 

I know about some basic game concepts like Game-Loops with global variables, but never had asked myself how-to realize the graphics in a 2D-Game with some small game physic features.

 

So i made a small game concept (see attachment).

 

1) I want to have a beer throughing person, that throughs a beer with speed dependend on how long a button was clicked.

2) When the button is released the arm of the person moves and throughs the beer to the right side. 

3.) During the beer flies, the camera follows the beer (see Scrolling are in the game concept).

4.) In the last step, the beer falls down to a trampoline, and kips directly into the mouth of a beer drinker on the right side if the speed was correct

 

So my first question is about how to realize the graphics:

 

1.) How should i realize the character and background graphics?

2.)  I want that the beer runs out of the glas during it kips in the last area. Is there a special trick to make such water-like animation?

3.) Should i use different layers for the characters?

 

I hope i can get some hints from experienced developers and sorry for my newbee questions.

 

With best regards,
Bjoern

 

 

[d13]

This is genius.

I can't wait to play this game!

[AzraelTycka]

Hello,

 

there are different ways to approach this depending your current skill and knowledge.

 

I would recommend you to check tutorials to games such as angry birds, that's basically what you are mostly looking for (there are ltierally dozens of them so just pick whatever suits you better). In this kind of game they have sling (your throwers hand), birds (your beer) and the basic physics model which handles the flight of the bird (beer). Instead of sling you can just use arm of your charachter and give it some other kind of animation that sling, but programming-wise it's the same thing.

The movement itself is handled by physical model (velocity, acceleration, gravity), hitting trampoline just means giving more energy to the object (beer) in a certain direction (you can imagine acceleration or velocity is given to the object when it comes in contact with trampoline based on it's angle of impact).

 

Now to your questions.

 

Make the graphics however you want, use photoshop-like program or you can use canvas basic drawing methods and create functions which do the graphics for you, depending on youn needs. Though drawing in photoshop might be easier when it comes to complex (in terms of high detail) characters.

For rendering graphics use canvas (html element). Thought i would suggest going for some library might be a better choice (pixi for eample - you can find it has it's own section here on html5gamedevs.com)

 

Water like animation, depends on how much interactive it needs to be you can either pripare sprite for you animation in advance (photoshop) or you can use particle system and basicaly give them the water like texture - both is used very often. To give you some general idea how such particles are used for different water effects (ex1, ex2) and one simple example I just found on stack with simple graphics without particles. Emptying bottle can be made as sprite for example or as a container containing a few 'beer' particles.

 

Layers are in this context meant different canvas elements. That basically depends on you. This kind of thing can be renderend on a single canvas without any troubles on the way. Considering your kind of questions I'd go with one canvas element (or if the situation doesn't allow so the least amount of canvas elements you can afford to) and focused on learning what you can do with it.

 

Btw if you are interested there are frameworks/engines such as phaser or panda where their authors already took care of preparing usual arsenal you need to make games so you can focus on the game itself. For example, physics models are already implemented you don't need to program it yourself, just use frameworks' methods and you are ready to go, in case of rendering phaser is taking care of that for you as well (phaser implements pixi library I mentioned above), in case of panda I'm not completely sure but I think you cna go with pixi or other panda plugin which you choose.

 

 

I would say your questions are too general, I don't know if I was giving too general answers which you already know about or if I was actually any helpful. In any case if you have more questions or want more answers I'd suggest you to ask more exact questions.

Just to be sure, one phaser example on how it handles sprite animations (pixi library - draws to canvas) and here you can see 'raw' js for animation on canvas. When you do everything by yourself you need to create your own functions/methods for drawing that's what second example (raw) was about, in case of pixi you only need to now that to draw something you need to call draw() function (well it has different name in pixi but that's just a little detail) and in phaser you actually just create your game character and the framework itself takes care of calling draw() funciton itself. Decide which way you want to go on yourself.

[alagatar]

Hi,
Wellcome to game dev)
About your questions, for realize game bg and character, i think best will be if you draw it fact to you, make some animation.
For animation when beer flies you can make particle effects and this will fine view)
Also for such 2d game i recomend use openfl and haxe language.

[Schludi]

Hello!

 

Thank you very much for your response!

 

Dependend on your post and what i read in the forum i think it would be the best way to learn phaser.io . 

 

When you see a Angry Birds like tutorial build with phaser, feel free to post it here . 

 

With best regards,
Bjoern

[Schludi]

Hi algatar!

 

I just saw your post because you sent it one minute earlier before i had finished mines .

 

Do you have experiences with phaser.io too? Do you see some benefits with openfl in comparision with phaser.io?

With best regards,

Bjoern

[alagatar]

Hi, sorry but i no work with phaser.io, i can recomend also try unity3d, this is all in one tool for game development also its free now.

[Outrider]

Gutentag Defcon . 

 

So... for gamedevelopment the typical cool kids language is GML (Game Maker Layer which is an abstraction of C++). For all the adults out there they learn C++ or C# (which is what most professional companies work in afaik). 

 

A new brand of gamedeveloper is coming up the ranks by learning Javascript which with Node, or Angular can create a fully functional game just like C++ or C#, but there are fewer jobs atm for javascript game developers. 

 

@Defcon specifically it depends on your language background and goals. If you want to go hobbyist I think Javascript is the best method, then look into the Phaser platform.  http://phaser.io

 

I speak a little german if you have any trouble and want to contact me further hit me up on twitter . @_Outrider