Simple 2D game tutorial for beginners

I’m looking for a beginners tutorial on creating 2D games with Urho3D.

Where should I look for it?

I’m specifically interested in using UrhoEditor for scene creation of 2D game.
Where can I get more info on this topic, please?

I’m new to Urho3D, where to start from?

I haven’t done a 2D-only game yet, I always use 2D sprites in 3D (for a flat look just use an orthographic camera). Very few people have dealt with that area of the engine. Is there something you have in mind that cannot be achieved in 3D?

Hi practicing01,
The idea I have (nothing original, a kind of fluppy-bird ) probably can be made in 3D, but that means I have to find someone who makes 3d graphics and me myself I have almost zero experience with developing 3D games. That’s way I’m looking more toward 2D solution.

You misunderstood, you can animate textures and/or you can attach sprites to a node (which resides in 3d space). Skeletal animation can be done in blender as well.

Yes, I understand that. I can add sprites (and animate their textures) to 3d space, and move them across x and y axis, and use z axis as depth’s layer.
Currently, I’m struggling to understand how to setup camera for 2d scenario. As I understood I need to use Orthographical camera with some negative z transpose. But how to determine such camera’s size in order to match to the mobile device the game should run on?

Google to the rescue ! indiehoodgames.wordpress.com/20 … a-unity3d/ You can change the camera settings through code or the editor.

Thanks a lot! Looks very interesting, I’ll investigate it more thoroughly…

2D samples currently adjust camera zoom to fit user’s screen resolution. For example in sample 27_Urho2DPhysics.as:

In your project, simply replace 1280 and 800 by your own screen resolution then adjust zoom as you like. You only have to do this once: when you run your project on another device, content display will automatically adapt to your new screen resolution.

[quote=“Mike”]2D samples currently adjust camera zoom to fit user’s screen resolution. For example in sample 27_Urho2DPhysics.as:

In your project, simply replace 1280 and 800 by your own screen resolution then adjust zoom as you like. You only have to do this once: when you run your project on another device, content display will automatically adapt to your new screen resolution.[/quote]

Hi Mike,
What does it mean user’s screen resolution? Is it a resolution which designer used for preparing game assets or it’s a resolution of the mobile device screen?

My current workflow for preparing assets and adopting to different mobile device screen sizes : (in Cocos2d-x)
I use 1920 x 1280 (3:2 aspect ratio) as safe-zone resolution, that’s the game area that will always be shown on any mobile device screen.
I prepare graphics according to that resolution and for background I use slightly bigger 2280 x 1520 (3:2 aspect ratio) resolution, for nice padding on mobile device which screen aspect ratio is different than 3:2.
All that graphics are scaled and duplicated for HD (1.0 scaling), SD (0.5 scaling) and LD (0.25 scaling) assets folders.
On game start up I query device’s screen size and set the search path for relevant assets folder.

You can try it for yourself with sample 32_Urho2DConstraints.as :

• run the sample with a 800x600 resolution (or less, this is just an example)
• replace 1280 and 800 by 800 and 600 => camera.zoom = 1.2f * Min(graphics.width / 800.0f, graphics.height / 600.0f);
• tweak 1.2 to adjust zoom to what looks best for you

[quote=“Mike”]You can try it for yourself with sample 32_Urho2DConstraints.as :

• run the sample with a 800x600 resolution (or less, this is just an example)
• replace 1280 and 800 by 800 and 600 => camera.zoom = 1.2f * Min(graphics.width / 800.0f, graphics.height / 600.0f);
• tweak 1.2 to adjust zoom to what looks best for you[/quote]
  I can try but the problem is that I cannot grab what stands behind these numbers…

graphics.width and graphics.height is probably (I hope) screen size of my laptop (which is 1280 x 800)
next we divide screen width by 1280 and height by 800, but what those 1280 and 800 represents? size of what?
next multiply by zoom factor Min of both…

Also line before that which sets Ortho size:

I don’t get it…

Say I have made 2 images for my game which should be played only in landscape mode:
one is a background of size 2280 x 1520
another is a hero of size 800 x 600 positioned in the center of safe-zone
And I want my safe-zone to be of size 1920 x 1280, that’s the game area that will always be shown on any device out there

How to make it work properly on different devices? I know how to do it on another engine, but have no clue how to accomplish this with Urho3D.

Seems like nice formula to calculate ortho camera size… but I can’t figure out what [quote]s = Desired Height of Photoshop Square (px)[/quote] does mean?

I’m zero in Photoshop

Using PIXEL_SIZE ensures that the display doesn’t stretch when rotating your device.

Zoom ratio (1.2) is determined from my desktop resolution (1280x800).
Now if I want my display to be the same on another desktop or a mobile device, I have to account for the new resolution, that’s why I scale with graphics.width and graphics.height.
If I had tested with a 800x600 resolution then the zoom ratio would have been much lower to display the entire scene.

On a sidenote: Since Urho3D supports TMX quite well, Tiled can be a very convenient level editor for 2D projects.

[quote=“Mike”]Using PIXEL_SIZE ensures that the display doesn’t stretch when rotating your device.

Zoom ratio (1.2) is determined from my desktop resolution (1280x800).
Now if I want my display to be the same on another desktop or a mobile device, I have to account for the new resolution, that’s why I scale with graphics.width and graphics.height.
If I had tested with a 800x600 resolution then the zoom ratio would have been much lower to display the entire scene.[/quote]

Thanks for clarifications, Mike. I have to play with different settings to get a feel of how it all works.

On a sidenote, I have bought all 3 tools from CodeAndWeb for my cocos2d-x projects. As I understood, TexturePacker and PhysicsEditor I can use for Urho3D projects as well (with Sparrow template selected). But, can I use their 3rd tool SpriteIlluminator with Urho3D as well?

Hello there!

Can anyone help me?
I create simple scene in editor, create ortho camera and load scene in AngelScript. But when i load script into Player i got black screen.
https://yadi.sk/d/GIC68Zes3ALYEP

You have black screen because you draw nothing.
Have you tried examples?

BTW, read forum rules. You abused them.

I try find some Urho2D examples, but got nothing special. In all examples i see the same thing that I have.

All scripts in bin/Data/Scripts work fine.

They didn’t load XML file from editor. Of course, if you do everything yourself, it will work!

Loading XML scene from editor is a single line of code. So I don’t think that it is a problem to make any of example scripts load scene from XML. Anyway, these examples is a good start point for learning Urho script API.

It not is problem, this just NOT WORK.

In my XML scene i have TileMap2D and ortho camera. I load scene like this: “scene_.LoadXML(cache.GetFile(“test.xml”))” in AS script.

Huh, I’m a bit confused now.
Are you talking about code from the archive above?
Or you’ve tried to add scene loading into working example scripts?

I tried create script. Only example with XML scene is NinjaSnow. I load scene by LoadXML(), get camera from camera node and set viewports[0].
http://pastebin.com/kHjtam87

Hello there, I’m from cocos2dx too, and i’m trying to understand the differences between cocos design resolution and urho magnifying factor…
incidentally, sprite illuminator could be used… but one has to adapt the shaders from c++ codenweb sdk to urho one… so not out of the box…