2D game/GUI

Trying to find a way to make real 2d space GUI and environment for games…

rather than pseudo 2d GUI in 3d space with camera locked on it?
is it possible or blender makes it all automatically exist in 3d space as priority?

I am worried it is all could be wrong when playinh

In general 2D is contained in 3D.

But when you want pixel precise output a 3D environment might not be the best choice due to everything gets scaled relative to the camera.

Nevertheless pixel precise output needs special treatment when there are different sized output windows. E.g. a 20x20 pixel sprite has a different relative size on a 640 × 480 screen as on a 1920 × 1080 screen. So it is a question of your needs.

This is theory. The BGE contains a 3D engine. It renders everything with it. I do not know an easy build-in option to render pixel-precise sprites (at least not at the moment).

You might be able to do that with a GLSL filter (but this is a real overkill). Maybe BGL can do that. I’m not sure.

The typical approach to get a Menu or an HUD-Overlay is to render an overlay scene over the level scene. This overlay scene does not need a moving camera as the output is static, but can be moved for scrolling effects. This method is very simple to use and allows complex and independent overlay scenes.

Most 2D graphical systems are … actually 3d. I mean, think about what z-order is?
However, if you use proper 2d systems, then yes, it it more efficient than using a 3D system, and as Monster points out, there are some special requirements of 2D games if you want pixel precision. If you’re really pedantic about it you can disable mipmaps, scale your images correctly and then use GL_NEAREST sampling (can set with bgl glTexParameter).

The main issue with 2D games in BGE is the lack of a 2D physics engine. But for menu’s and such, it’s all fine.

When it comes to 2D GUI, I came around these 3 projects:



Using BGUI a friend of mine made a whole inventory system where you can drag and drop items around in a slot grid system. So there are possibilties !

and who is this mythical Moguri? :slight_smile: Kidding…wasn’t he at one time the BGE module owner or maintainer? Back then I never considered using the BGE…based my impressions on the games I saw made with it…

but as far as GUI goes or any 2D inside blender…isometric 3D is the only way to go if you are not an experienced coder.

I’m working on a 2.5D project right now, using code to lock important things such as the player and the enemies to 0 on the X axis. Seems to be working for me so far!

@Monster @MichelleSea @JustinBarett @WKnight02 @sdfgeoff
Thank you responding and nice to meet you! I am still newbie and fresh of developing only simple programs in the past.

@MichelleSea please show me your game! i am very interested in such project!

@JustinBarett @WKnight02 I checked out variety of UI previously, from Unreal engine to Unity to GLUT.
I’ll try bgui when i have the time, but i am not an experienced coder and not familiar with process compiling or building
a code into an application. I checked this http://solarlune-games.blogspot.co.id/2013/01/soldier-of-valchion-importance-of-name.html
and while it seems very nice use of the BGUI and looks very gamey…
I am kinda looking to built polygonal shapes as a UI/ingame like below.
Image courtesy of http://All-free-download.com and https://www.worldmarket.com/


Of course logically hexagon is basically a quad with two extra vertex on top and the lines connected between them.
and as @sdfgeoff pointed, i probably need to code z-order and x y length to create a game UI. Which maybe also allows me to
code the physics in the form of 2 dimensional cartesian grahpic.
image courtest of http://flatformer.blogspot.com/2010/02/simple-2d-gravity-in-games-explanation.html

And problem is, i am probably more of illustrator and designer than i am a coder/programmer…
I probably should try illustrating the game more as ablu

So, then, @monster

Do you think i can find a tutorial for visual programming and building a database for BGE?

This has not really much to do with behavior.

You can create meshes with hexagonal shape without any problem. To be honest, polygonal modelling seems to fit your needs better than fixed bitmaps. It will scale really well with any screen resolution.

Quick tip:

  • reset the orientation of your camera <alt+r>
  • move it above the ground
  • switch it to orthogonal

I do not get what you mean with “building a database”.

what you mean by behaviour?

of course i can build the hexagon on 3d space, but
question as a GUI and game environment, will it work without going haywire mid game?
SInce essentially, with flat polygon as GUI it will be more like holding a wooden/flat panel
with selections in 3d space of sorts? and the Z-order of the 3d space is essentially very big
from 0.0001 to 100 ++, an overkill for bitmap which is just merely 1 to 10 or something more managable?

since i will have a list of “data” like buttons and statistics or save games to choose from, essentially, a selectible database
for the game content, will this pseudo 2d hexagon works as GUI properly?

hence that’s why i need to know if it is possible to build like an actual 2D environment for game/ GUI on blender
so all my bitmaps will be consistent…

If it is not possible… maybe i should just move to actual game engine…

Blender seems very promising so i ask this question

With behavior I mean this statement:

Your original question is aiming for a pure representation layer. In other words - how you can present your content to the audience.

Building a database for content is business logic rather than presentation logic. This is good to know to see what you are aiming for, but less important to determine what options you have to to present the data. (You can show your data as text, even if that does not look nice the business should still work).

Back to the presentation.

The “Z-Order” is a helper to determine what covers what. In a 3D environment this is naturally given by the distance to the camera. As this is on pixel level you can even have cyclic overlapping (!does not work with semi-transparency!). This is no overkill as it does not add any additional processing.

I still do not see if your want polygons or bitmaps. As said, you can have both (even mixed).

Also if you decide to use game object objects (3D) to display the GUI, you can render it in a particular scene added as overlay in your game.

Game Scene + overlay(GUI Scene)

Then there should be no interference between the two scenes, yet you are able to access both scene states (so that an event in one scene can have an effect in another scene).

It won’t go haywire unless your poorly implement the system.

Is this what you mean of cyclic overlapping?

https://i.stack.imgur.com/dO58F.png

Then i suppose what i want is working"LAYERS" of programmed bitmaps. or is it “overlay” i am still a layman in blender terms.
When i meant a database, what i meant since 2d screen works in x and y length,
unique shapes are built by placing points on cartesian coordinates.
possibly shaping hexagonal UI or variety, for special use.


but the worst of my worries, are of this 2d sequence. of closely interacting bitmaps.


Since the ground is a pseudo 3d, technically everything are just flat rectagular planes with distrotions to look and move 3d,
inside those fake grid. and they need to be limited in their 2d movement to feel 3d.

this choice is purely asethetics…
and i feel like i need to show everything in a short animated presentation with all the possible assets interactions…

Sounds like you may be reinventing the wheel. We have rendering engines (eg: the BGE rasterizer) to handle drawing things on the screen where we want. In this case, I don’t see any reason why you can’t have them be actually 3d, and just use an orthographic camera to make it appear flattened.

Please don’t say that.
I suppose i am just worried of the cyclic overlapping like what Monster said.
Given object in 3d space may rotate in xyz while bitmap in 2d plane does not rotate pass its z order into other GUIs

What is this blender rasterizer? is it some sort of bitmap creation?

What i need merely a sort of way to have many “windows/GUI” in 2d form…be it bitmap or polygon
in stacks of z order that will not break into each others
regardless of camera view.
I prefer it to be a true 2d plane so i dont have to worry of the view suddenly changing into normal from orthographic.

the camera simply lock on to a coordinate and the windows and bitmaps can move around.

You can totally do that using two methods:

  1. Having a second scene that you spawn as an overlay. The render of this second scene is made from an orthographic camera that will never move. Spawn your game objects as UI elements in that scene, were you have precise control over anything.
    You can do everything you want in your main scene, because the second scene will be almost perfectly independant (you can still pass messages around using Python).

  2. Use one of the Python libs I linked previously.

When your camera is in orthographic mode, changing an element z component won’t change its position on the screen, but it will pass it in front of lower z objects. In orthographic mode there is no perspective (being closer or farther from the screen have no effect). So you will have to play purely with the x and y components, z being there solely to pass things on the foreground/background.

The rasterizer is the concept that translates the 3D objects to pixels in 2D. Its the renderer so to speak (https://en.wikipedia.org/wiki/Rasterisation).

you might want to look into using camera viewports. they can be moved around and depth ordered. nothing in the scene will change unless you tell it to, you need to assume constants if your ever going to get something done.

https://docs.blender.org/api/2.79/bge.types.KX_Camera.html#bge.types.KX_Camera.useViewport

all my ui is simply an overlay scene…there really is no reason to worry about this…you will feel better after doing some testing…I never have issues with overlap, I just move the panels/icons/mapped polygons up and down on the z axis and use a relatively low clipping range(like 10cm-2m or so).

seems very close to what i want! it has clear order of zs and positioning to my camera.
Thank you! @Daedalus_MDW
so blender has an API docs…

I suppose anyone here every worked on 2d GUI programming via the API? simple things like click and drag,
animated sprites all happening in a flat 2d screen?

Maybe JustinBarrett? since you worked on a game already?

There is no standard UI API as far as I know.

You have to play around with moving the objects and gathering the events yourself (mouse over, click, etc).

ive done a little UI stuff, nothing fancy. honestly, i created a command prompt interface for my game because i was fed up with GUI.