Games Some notes to better understand the XUI2D examples

fredo · Jul 16, 2019

During my familiarization with XUI2D it became necessary for me to get to know the elements and mechanisms involved.

For the research the objects in all "Game.bas" modules of the examples were viewed simultaneously.

All examples have been extracted to a directory, so each example is in its own folder.

1. Enter "game.bas" as search term in the file explorertileset

2. Mark all files "game.bas" of the hit list

3. Right click, click on context menu "Edit with Notepad++

4. In NP++ enter "X2BodyWrapper" (or your searchword) in find dialog

5. Click "Find ALL in ALL open documents"

6. See hit list in the lower area

A click in the hit list navigates directly to the appropriate location in the document in question.

You can even copy the result list and analyse it further so you might find out how they create bodies in all the examples:

B4X:

TileMap.CreateObject(TileMap.GetObjectTemplate(ObjectLayer, 3))
TileMap.CreateObject(Template)
TileMap.CreateObject2ByName(ObjectLayer, "power")
TileMap.CreateObject2ByName(ObjectLayer, "ship explosion")
X2.CreateBodyAndWrapper(bd, Null, "laser")
X2.CreateBodyAndWrapper(def, Null, "line")

Cross reference of most used game-subs in all examples:

The notes
Further down are my notes compiled from several sources (links at end of text), which might help others to better understand whats going on in Erel’s examples.

It is not a fully-fledged guide to create a game from scratch. But maybe it can make it easier to get started and get a clearer overview of the jungle of seemingly unmanageable information.

If something should be significantly wrong, I would be grateful for concrete hints what would be the correct way.

A quote from Erel from another place in the forum:
"Please ask as many questions as you have (each one in its own thread). This will help other developers to find answers in the future."

Intro

XUI2D is a cross platform framework to create games that consist of a world, actors and physically correct behavior.

The “Example Pack” has several different examples that show what can be achieved with little effort: https://www.b4x.com/android/forum/threads/xui2d-example-pack.96454/

XUI2D connects a physical engine to a graphical engine and has many game-relevant features like Bodies, Fixtures, Shapes, Sounds, Collisionsensors, ...

Components involved

The B4X-library “x2.b4xlib” is available here: https://www.b4x.com/android/forum/threads/b4x-x2-xui2d-XUI2D-game-engine.95208/

Basic concepts

There are two realities that need to work together

XUI2D helps us to position the graphics on the correct position.

Since XUI2D has no idea, what pixels are we have to convert pixel units to XUI2D units.

After XUI2D has calculated new positions we have to convert XUI2D units to pixel units.

Graphics then can be drawn with the new location information.

Raw code structure of a game

All setup and drawing is done in the B4X code module “Game”.

Prepare

Draw

B4X Code modules involved

Erel: "Don't be confused from all the X2 modules. Treat them as a library. Most games are implemented in the Game class."

The B4X Main module contains only the invocation of the game class “gm” and listening on key events. (Erel: "The main activity is not relevant as it is not cross platform. The main place for your code is the Game class.")

B4X:

Sub AppStart
    gm.Init
    gm.StartGame

Sub gmh_KeyPressed(Keycode as string)
    Select Keycode
            Case "Left"
                gm.LeftDown = State

The B4X Game class contains most of the code that makes up the game.

B4X:

Sub Init
    WorldInit
    GraphicsInit
    SoundInit
    ...
Sub StartGame
    TileMapInit
    Build layers
    CreateCharacters
    CreateObjects
    X2.Start
    ...

B4X classes can be used to represent characters and their behavior.

As developers, we must sooner or later put the conceptually understood facts into practice.

To do this, files must be created in the correct directory and the objects prepared, assessed and suitable values assigned in the IDE.

The X2 examples offer a good basis to look for best practices.

Folder Structure

Erel's "Cross platform tips" https://www.b4x.com/android/forum/threads/xui2d-cross-platform-tips.96815/#content explain the recommended way to organize the projects.
It is very simple and will help to add more platforms in the future.

"Shared Files"?

The simplest way to create a new project is to make a copy of one of the examples inside the X2 folder. As the references are relative all the references will be correct and the projects will be ready.

XUI2D elements

Whereas XUI2D contains a wrapper for the famous jbox2d engine, JBox2d itself is a Java port of the C++ physics engines LiquidFun and Box2d.

JBox2d doesn't understand computer graphics and pixels. It is simply a library that picks up numbers and spits out more numbers.

But XUI2D brings calculation results and your graphics together in a meaningful manner.

Everything exists and happens in the...

World

Stores lists of every element in the world.

Knows everything about the coordinate system of the world (not your pixel coordinates!).

Manages the physics simulation.

The mechanisms of XUI2D essentially work with 4 types of objects:

Bodies

The primary element.

They have location, velocity, rotation, reaction to forces but they have no shape or material attributes.

Shapes

Shapes are all centred on collisions.

They define the borders and the extent of the Bodies (collision geometry) and thus the interactions with other Bodies/forms.

Fixtures

Holds a single shape and attaches it to a Body. It also contains collision filtering flags, backpointer to the parent body and a sensor flag.

They provide material attributes to a Body like material density, elasticity, friction.

Joint

Acts as a connection between two Bodies (or between a Body and the world itself).

Physical actions are manipulated by:

Vec2

Forces and motion are described by vectors.

B2World

This is the main object (from XUI2D) in which everything happens.

At first you might think that the XUI2D physics engine only deals with gravity and levers.

But the world contains all the things (Bodies and fixtures) that are involved as objects in the game at any given time.

The world object knows the coordinate space and has a list of all elements (world has Bodies, Bodies have fixtures, fixtures have shapes).

The world object manages all allocations for the objects it contains.

But beware! The XUI2D world coordinate system (left) is different from the computer graphics coordinate system (right).

(Below is a little clarification from Erel about he coordinate system)

XUI2D helps us to convert between those systems back and forth.

The following things can be done with the world:

Specifying gravity

Adjust the physics simulation

Find fixtures in a specific region

Throw a beam and find crossed objects.

The world object will be connected to the screen via an imageview ivForeground in Layout “…”.

The connection between the world object and the imageview is done by X2.Initialize(…)

B4X:

Sub Class_Globals
Public world As B2World
Public X2 As X2Utils
Private ivForeground As B4Xview
…

Sub Initialize (Parent As B4XView)
Parent.LoadLayout("1")
world.Initialize("world", world.CreateVec2(0, -20))
X2.Initialize(Me, ivForeground, world)
Dim WorldHeight As Float = 14
Dim WorldWidth As Float = WorldHeight * 1.3333
X2.ConfigureDimensions(world.CreateVec2(WorldWidth / 2, WorldHeight / 2),_
WorldWidth)
…

The world object raises events based on collissions.

B4X:

Sub World_BeginContact (Contact As B2Contact)
       Dim Bodies As X2BodiesFromContact = X2.GetBodiesFromContact(Contact, "mario")
       …
Sub World_PreSolve (Contact As B2Contact, OldManifold As B2Manifold)
       Dim BodyA As X2BodyWrapper = Contact.FixtureA.Body.Tag
       CheckMarioCollisions (Contact, X2.GetBodiesFromContact(Contact, "mario"))
       …

Angles in X2
... are handled in Radians.

0 corresponds to "East". The angle increases counter-clockwise.

A conversion to degrees is integrated in x2.

(Example from the "Newton Cradle" example:

B4X:

Dim Rope As CompressedBC = X2.GraphicCache.GetGraphic2("rope", 0, X2.B2AngleToDegrees(ATan2(vec.y, vec.x) + cPI / 2), False, False)

X2BodyWrapper

Bodies are the primary elements in XUI2D that live within the world. But Bodies are not the things we see on screen. Bodies are invisible objects that carry properties. What we see and what collides are shapes.

Bodies move around and experience forces or are static at a specific position (ground or wall).

The Bodies itself will keep track of its own location. No external lists necessary.

Bodies have no geometry and are nothing physical.

They have Shapes attached to them so collisions can be calculated.

B4X:

Sub Class_Globals
       Public Const ObjectLayer As String = "Object Layer 1"
       …

Sub StartGame
       TileMap.Initialize(X2, File.DirAssets, "mario 1.json", ivBackground)
       TileMap.PrepareObjectsDef(ObjectLayer)
       Dim bw As X2BodyWrapper = TileMap.CreateObject(                                           TileMap.GetObjectTemplate(ObjectLayer,  3))    '3 = mario id
bw.Body.BodyType = bw.Body.TYPE_DYNAMIC
mMario.Initialize(bw)
…

Sub CheckMarioCollisions
mMario.bw.Body.ApplyLinearImpulse(X2.CreateVec2(0, 20 * mMario.bw.Body.Mass), _
                mMario.bw.Body.WorldCenter)
…

To create or remove a Body we call functions of the XUI2D world to do this for us.

Once Bodies have been created, you can apply some properties to them such as location. But remember to tell XUI2D the value in world coordinates and not in graphics coordinates!

A Body can be one of three Bodytypes:

Dynamic. This will be used most often. A “fully simulated” Body. A dynamic Body moves around the world, collides with other Bodies, and responds to the forces in its environment.

Static. A static Body is one that cannot move (infinite mass). Static Bodies are used for fixed platforms and boundaries.

Kinematic. A kinematic Body can be moved manually by setting its velocity directly. A user-controlled object would be a kinematic Body. Note that kinematic Bodies collide only with dynamic Bodies and not with other static or kinematic ones.

If a Body in motion should slow down over time, you can apply friction or damping.

B4X:

bw.Body.LinearDamping = 0.9

Bodies that move very fast can have a bullet flag set, so that collision detections are more precise.

B4X:

bw.Body.Bullet = true

But! A Body cannot exist on its own in the world. It must be attached to a shape with a fixture.

B4X:

Sub CreateMarioLegs
       Dim rect As B2PolygonShape
       rect.Initialize
       rect.SetAsBox2(0.45, 0.05, x2.CreateVec2(0, -x2.GetShapeWidthAndHeight(bw.Body.FirstFixture.Shape).y / 2 + 0.05), 0)
       Dim f As B2Fixture = bw.Body.CreateFixture2(rect, 0.1)
       f.Friction = 1

The job of the shape is to keep track of all the necessary collision geometry attached to a Body.

A shape also has several important properties that affect the Body’s motion:

There is density, which ultimately determines that Body’s mass.
Shapes also have friction and restitution (“bounciness”) which will be defined through a fixture.

Shapes can even be created and destroyed on the fly while the game is running.

Create body
Define shape
Create fixture
Assign shape to fixture
Attach shape to Body

One Body can have multiple fixtures attached to it, and the center of mass of the Body will be affected by the arrangement of its fixtures. When two Bodies collide, their fixtures are used to decide how they will react.

XUI2D separates the concepts of Bodies and shapes into two separate objects. So you can attach multiple shapes to a single Body in order to create more complex forms.

"Center of body" and "center of mass"

http://box2d.org/manual.pdf , page 29, "Position and angle"
The body definition gives you the chance to initialize the position of the body on creation.

This has far better performance than creating the body at the world origin and then moving the body.

Caution
Do not create a body at the origin and then move it. If you create several bodies at the origin, then performance will suffer.

A body has two main points of interest:

The first point is the body's origin. Fixtures and joints are attached relative to the body's origin.
The second point of interest is the center of mass. The center of mass is determined from mass distribution of the attached shapes or is explicitly set with b2MassData.

Much of Box2D's internal computations use the center of mass position. For example b2Body stores the linear velocity for the center of mass.

When you are building the body definition, you may not know where the center of mass is located. Therefore you specify the position of the body's origin.

You may also specify the body's angle in radians, which is not affected by the position of the center of mass. If you later change the mass properties of the body, then the center of mass may move on the body, but the origin position does not change and the attached shapes and joints do not move.

B4X:

bodyDef.position.Set(0.0f, 2.0f); // the body's origin position.
bodyDef.angle = 0.25f * b2_pi; // the body's angle in radians.

A rigid body is also a frame of reference. You can define fixtures and joints in that frame. Those fixtures and joint anchors never move in the local frame of the body.

Collisions

Collisions are a central element in Box2d and therefore also in X2. All interactions are registered by collisions and handled by events.

So that every collision between objects does not have to be evaluated individually (time requirement!), rules can be defined. In the end, it all boils down to "who ignores whom".

The rules are defined by the interaction of the properties "The object belongs to a category" and "The object reacts to certain categories".

Erel presented the interaction in this detailed example: https://www.b4x.com/android/forum/threads/xui2d-to-collide-or-not-to-collide.97144/

To simplify the calculation of the mask bits, @Gunther has introduced a tool here: https://www.b4x.com/android/forum/t...-masks-calculator-collision-filtering.103320/

In this blog post there are more hints, among others about groups:
https://www.aurelienribon.com/post/2011-07-box2d-tutorial-collision-filtering

X2Utils

This is the main class with the game loop implementation and various utility methods.

You can't conclude "best practices" with this yet, but you get an idea of what x2utils is used for.

B4X:

X2.AddFutureTask(Me, "Create_Bird", 1500, Null)
X2.AddFutureTask(Me, "Show_GetReady", 0, Null )
X2.ConfigureDimensions(X2.CreateVec2(WorldWidth / 2, WorldHeight / 2), WorldWidth)
X2.GraphicCache.GetGraphic2("fried", 0, 0, True, False)
X2.GraphicCache.PutGraphic("bg", Array(X2.LoadBmp(File.DirAssets, "bg.png", WorldWidth, WorldHeight, False)))
X2.GraphicCache.PutGraphic("bug", Array(all.Get(0), all.Get(1)))
X2.GraphicCache.PutGraphic("explosion", X2.ReadSprites(xui.LoadBitmap(File.DirAssets, "explosion_atlas.png"), 3, 3, TruckWidth, TruckWidth))
X2.GraphicCache.PutGraphic("fried", Array(X2.LoadBmp(File.DirAssets, "fried.png", 0.5, 0.5, True))).VerticalSymmetry = True
X2.GraphicCache.PutGraphic2("rope", Array(X2.LoadBmp(File.DirAssets, "rope-34141_1280.png", 0.1, 1, True)), True, 5)
X2.GraphicCache.WarmGraphic(Truck.GraphicName)
X2.ImageViewResized
X2.LastDrawingTasks.Add(X2.MainBC.AsyncDrawLine(bcpoint.X, bcpoint.Y, HookPointRight.X, HookPointRight.Y, PulleyBrush, 5))
X2.mWorld = vWorld
X2.SetBitmapWithFitOrFill(ivBackground, xui.LoadBitmapResize(File.DirAssets, "Sky.jpg", ivBackground.Width / 2, ivBackground.Height / 2, False))
X2.SlowDownPhysicsScale = 5
X2.SoundPool.AddSound("laser", File.DirAssets, "pew.wav")
X2.SoundPool.StopMusic
X2.Start
X2.Stop
X2.UpdateTimeParameters
X2.UpdateWorldCenter(ClampScreenCenter(X2.ScreenAABB.Center.X - dx))
X2.UpdateWorldCenter(TileMap.MapAABB.Center)
X2.UpdateWorldCenter(X2.CreateVec2(Tank.Body.Position.X, X2.ScreenAABB.Height / ZoomFactor / 2))

X2TileMap

Every game consists of countless graphic elements that move on the screen or are in the way as "things of the world". Since this would be too complex from a programming point of view, the concept of tiled maps is used.

Maps are laid out in a grid pattern and stacked as layers of foils.

Maps can easily be created with the famous "Tiled" MapEditor: https://www.mapeditor.org/

Basic work- and data flow
(1) In the editor "Tiled" a new "Tilemap" is created and stored in the format ".json" in the own project folder "Shared Files" (7).

(2) In the "Layers" window there is already a "Tile Layer 1" on which our map is drawn. In the saved json file this layer is saved with its properties.

(3) After downloading a tileset graphic file into the folder "Shared files" (7), you create a "New tileset" with the help of "Browse..." and select the tileset graphic file there. In the json file only the name and some properties of the graphic file are stored. In the code later X2 uses some of them.

(4) You draw your playing surface with stamps selected on the tileset. The resulting bitmap is stored in a special format within the json file.

(5) In the Layers window you create an "Object Layer 1" to place objects on it.

(6) You can place as many objects as you like. However, these are only data points that are filled with life later in the code by the X2 framework.

(7) As already mentioned, the graphic files and the json files are in the "Shared files" folder. When compiling, the files are automatically copied into the "Files" folder of B4J, B4A and B4i.

(8) The drawn map is imported into the code by reading the created json file through the X2 framework.

The most common layers are the Tile Layer and the Object Layer. There is also an Image Layer for including simple foreground or background graphics.

Tile Layers

They provide an efficient way of storing a large area filled with tile data.
The data is a simple array of tile references. The information needed to render each tile layer is stored with the map.

Object Layers

They can store many kinds of information that would not fit in a tile layer.
Objects can be Rectangle, Ellipse, Point, Polygon, Polyline, Tile, Text.
They can be freely positioned, resized and rotated.
They can also have individual custom properties (see "objecttypes.json").
Objects are identified by id.
Objects can be named (multiple objects can have the same name!).
Objects can be given a type, to customize properties for this object type.

Object types

Note that in B4X there is a file named "objecttypes.json" in the Files tab. This is a new file that is required when using X2TileMap. It holds the objects custom properties defaults. You can import it to Tiled with "View - Objects Type Editor", "File - Import".

The edited Tilemap is to be exported as ".json" file into the "Shared Files" folder of our B4X project.

X2TileMap allows loading those map files (the "mario 1.json" file) and the additional informations attached to each layer into the B4X game.
Drawing is done automatically by calling DrawScreen or if you need more control you can call Draw and pass the required area.

X2TileMap only draws the currently visible tiles.

B4X:

Public Sub Tick (GS As X2GameStep)
    mMario.Tick(GS) 'run first as mario updates the world position
    TileMap.DrawScreen(Array("Tile Layer 1", "Tile Layer 2"), GS.DrawingTasks)
End Sub
Public Sub DrawingComplete
    TileMap.DrawingComplete
End Sub

X2TileMap is used to "communicate" between the game and the map we created with "Tiled":

Set Map Dimensions
Set Backgroundcolor
Handle Tile layer
Handle Object layer objects
It can even be used to create Bodies that were defined on an object layer.

Tilesets

These are graphic images referred to as tiles laid out in a grid.

Tilesets are created by graphically more artistically gifted people and can be downloaded and used free of charge or at low cost from the internet (see Game assets below).

During the training in "Tiled" it is easy to learn the principle of spritesheets and tilesets.

There is a recommendation to use tilesets that contain more than 1 tile.

Tile flipping and rotation is supported. The tiles images must be the same size as the map tiles.

(To be contiued …)

Information sources

https://www.b4x.com/android/forum/threads/xui2d-example-pack.96454/

https://docs.mapeditor.org/en/stable/

http://google.github.io/liquidfun/Programmers-Guide/html/md__chapter02__hello__box2_d.html

https://natureofcode.com/book/chapter-5-physics-libraries/

https://love2d.org/wiki/love.physics

http://box2d.org/manual.pdf

http://www.iforce2d.net/b2dtut/collision-anatomy

https://www.b4x.com/android/forum/threads/how-to-make-games.32593/

https://www.gamasutra.com/blogs/Svy..._Keeper_How_the_graphics_effects_are_made.php

https://rotatingcanvas.com/tutorials-index/

http://blog.sigman.pl/posts/box-2-d-basics-part-1

Examples

The links are summarized here, because the results of the forum standard search produces a mix of too many aspects. The search on this one website may lead gamedev-beginners faster to the keyword via browser [ctl]+f.

Erel: "You can do whatever you like with the code including releasing the games as-is to the stores. Notes:- All of the games resources (graphics and sounds) were taken from open source projects. Make sure to check their licenses. - The Mario and Angry birds examples were created for educational purposes."

(The XUI2D “example pack” contains all “Erel-Examples” shown so far in the forum)

X2ep: https://www.b4x.com/android/forum/threads/xui2d-example-pack.96454/

Single examples from the x2ep with video and special informations:

More examples besides the pack:

Inverted Pendulum on a cart which is actuated by motors on the wheels: https://www.b4x.com/android/forum/threads/inverted-pendulum-on-cart-and-pidcontroller-class.99894/

Inverted Pendulum with a single wheeled pendulum (Segway): https://www.b4x.com/android/forum/t...e-wheel-and-pid-controller.99973/#post-628956

MouseJoint Example: https://www.b4x.com/android/forum/threads/mousejoint-example.100181/#post-630290

Continuous movement between two points: https://www.b4x.com/android/forum/threads/follow-path-from-tiled.103991/#post-652062

Complex body made of multiple images: https://www.b4x.com/android/forum/threads/xui2d-image-body-different-size.105212/#post-659107

Example of creating a body just as a stub for an image: https://www.b4x.com/android/forum/threads/xui2d-image-body-different-size.105212/#post-659241

Creating a non-centered shape: https://www.b4x.com/android/forum/threads/no-position-for-b2circleshape-in-xui2d.106943/#post-669331

Erel’s Tutorials

The links are summarized here, because the results of the forum standard search produces a mix of too many aspects. The search on this one website may lead gamedev-beginners faster to the keyword via browser [ctl]+f.

https://www.b4x.com/android/forum/threads/xui2d-units-and-scales.95285/

https://www.b4x.com/android/forum/threads/xui2d-bitmapcreator-vs-compressedbc.98217/

https://www.b4x.com/android/forum/threads/xui2d-performance.96326/

https://www.b4x.com/android/forum/threads/xui2d-first-joints-demo.96383/

Create the bitmaps or animations using xui2d: https://www.b4x.com/android/forum/threads/xui2d.96556/page-2#post-609204

Another way to set the graphics: https://www.b4x.com/android/forum/threads/xui2d.96556/page-2#post-609216

GS.DrawingTask is a list of DrawingTask types: https://www.b4x.com/android/forum/threads/xui2d.96556/page-2#post-609220

Test whether one of the wheels touches something: https://www.b4x.com/android/forum/threads/xui2d-monster-truck-example-wheeljoint.96622/#post-615967

B4X:

If FrontJoint.BodyB.GetContactList(True).Size > 0 Or RearJoint.BodyB.GetContactList(True).Size > 0 Then
   Log("on ground")
Else
   Log("in air")
End If

There are several ways to go over the templates or the created bodies: https://www.b4x.com/android/forum/t...-simple-xui2d-test-project.96793/#post-610646

B4X:

Dim ol As X2ObjectsLayer = TileMap.Layers.Get(ObjectLayer)
For Each template As X2TileObjectTemplate In ol.ObjectsById.Values
   Select template.Name
       Case "circle", "hinge"
           'do nothing
       Case "ground"
           Dim bw As X2BodyWrapper = TileMap.CreateObject(template)
           bw.Body.GravityScale = 0 'do something special with the ground bodies.
       Case Else
           TileMap.CreateObject(template)
   End Select
Next

Code for finding the touched body. An efficient solution based on box2d internal tree of AABBs: https://www.b4x.com/android/forum/t...-simple-xui2d-test-project.96793/#post-610850 (para 4)

B4X:

Sub TouchedSwitch(x As Float, y As Float) As X2BodyWrapper
   Dim aabb As B2AABB
   Dim vec As B2Vec2 = X2.ScreenPointToWorld(x, y)
   aabb.Initialize2(vec, vec)
   For Each body As B2Body In world.QueryAABBToMapOfBodies(aabb).Keys
       If body.FirstFixture.Shape.TestPoint(body.Transform, vec) Then
           Dim bw As X2BodyWrapper = body.Tag
           If bw.Tag Is SwitchData Then
               Return bw
           End If
       End If
   Next
   Return Null
End Sub

https://www.b4x.com/android/forum/threads/xui2d-cross-platform-tips.96815/

https://www.b4x.com/android/forum/threads/xui2d-to-collide-or-not-to-collide.97144/

The correct way to set the world center is: https://www.b4x.com/android/forum/threads/xui2d-how-is-the-tilemap-drawn.97652/#post-615435

B4X:

Dim WorldWidth As Float = 25 'meters
Dim WorldHeight As Float = WorldWidth / RatioSetInDesignerScript 'same ratio as in the designer script
X2.ConfigureDimensions(world.CreateVec2(WorldWidth / 2, WorldHeight / 2), WorldWidth)

Erel's updated X2Tiles example that now limits the map movement to the visible map: https://www.b4x.com/android/forum/t...sing-the-world-edges.97550/page-2#post-616171

B4X:

Sub ClipScreenCenterToMapArea (v As B2Vec2) As B2Vec2
   Dim ScreenHalfWidth As Float = X2.ScreenAABB.Width / 2
   Dim ScreenHalfHeight As Float = X2.ScreenAABB.Height / 2
   v.X = Max(ScreenHalfWidth, Min(TileMap.MapAABB.Width - ScreenHalfWidth, v.X))
   v.Y = Max(ScreenHalfHeight, Min(TileMap.MapAABB.Height - ScreenHalfHeight, v.Y))
   Return v
End Sub

The scaling strategy that Erel chose: https://www.b4x.com/android/forum/threads/xui2d-designer-variable-mixed-up.97663/#post-615617

https://www.b4x.com/android/forum/threads/xui2d-bitmapcreator-vs-compressedbc.98217/

Jumptest: https://www.b4x.com/android/forum/threads/xui2d-jumptest-physics.98343/#post-619747

Make Joints more rigid: https://www.b4x.com/android/forum/threads/xui2d-connection-force-of-joints.98691/#post-621834

Chain, connection force of joints: https://www.b4x.com/android/forum/threads/xui2d-connection-force-of-joints.98691/#post-622024

Static drawings that are not being updated too frequently: https://www.b4x.com/android/forum/threads/how-to-draw-a-line.98846/#post-622847

B4X:

'BrushBackwards is a global variable.
'Created like this: BrushBackwards = X2.MainBC.CreateBrushFromColor(xui.Color_Red)
Public Sub Tick (GS As X2GameStep)
   If GS.ShouldDraw Then
       GS.DrawingTasks.Add(X2.MainBC.AsyncDrawCircle(100, 100, 50, BrushBackwards, True, 10))
       GS.DrawingTasks.Add(X2.MainBC.AsyncDrawLine(0, 0, X2.MainBC.mWidth, X2.MainBC.mHeight, BrushBackwards, 5))
   End If
End Sub

How to use Raycast callbacks: https://www.b4x.com/android/forum/threads/xui2d-world-raycast-callback-procedure.98870/#post-622735

B4X:

Private Sub Panel1_Touch (Action As Int, X As Float, Y As Float)
   If Action = Panel1.TOUCH_ACTION_DOWN Then
       Dim p As B2Vec2 = X2.ScreenPointToWorld(X, Y)
       'cast a ray from the kid to the point
       RaycastBody = Null
       RaycastPoint = p
       world.RayCast(mKid.bw.Body.Position, p)
       If RaycastBody <> Null And RaycastBody.IsDeleted = False Then
           'ray hit a body
           RaycastBody.TimeToLiveMs = 1
       End If
       CreateLaser
   End If
End Sub

Private Sub World_RaycastCallback (Fixture As B2Fixture, Point As B2Vec2, Normal As B2Vec2, Fraction As Float) As Float
   Dim bw As X2BodyWrapper = Fixture.Body.Tag
   'ignore static bodies
   If bw.Body.BodyType = bw.Body.TYPE_STATIC Then Return -1
   RaycastBody = bw
   RaycastPoint = Point.CreateCopy
   'return fraction to limit the ray up to the current fixture.
   'The result is that the last event will be the closest body.
   Return Fraction
End Sub

How to distinguish between different "sources" of Callback: https://www.b4x.com/android/forum/t...ferent-sources-of-callback.98925/#post-623192

B4X:

Private Sub Panel1_Touch (Action As Int, X As Float, Y As Float)
   If Action = Panel1.TOUCH_ACTION_DOWN Then
       Dim p As B2Vec2 = X2.ScreenPointToWorld(X, Y)
       'cast a ray from the kid to the point
       RaycastBody = Null
       RaycastPoint = p
       world.RayCast(mKid.bw.Body.Position, p)
       If RaycastBody <> Null And RaycastBody.IsDeleted = False Then
           'ray hit a body
           RaycastBody.TimeToLiveMs = 1
       End If
       CreateLaser
   End If
End Sub

Private Sub World_RaycastCallback (Fixture As B2Fixture, Point As B2Vec2, Normal As B2Vec2, Fraction As Float) As Float
   Dim bw As X2BodyWrapper = Fixture.Body.Tag
   'ignore static bodies
   If bw.Body.BodyType = bw.Body.TYPE_STATIC Then Return -1
   RaycastBody = bw
   RaycastPoint = Point.CreateCopy
   'return fraction to limit the ray up to the current fixture.
   'The result is that the last event will be the closest body.
   Return Fraction
End Sub

A nice trick to calculate the points of AngryBird’s future movement trajectory: https://www.b4x.com/android/forum/threads/xui2d-angry-birds-example.99052/#post-623655

B4X:

'This code is similar to the code that moves the real bird.
Private Sub RunSimulation (gs As X2GameStep)
   If gs.ShouldDraw Then
       SimulationBird.GravityScale = 0
       SimulationBird.LinearVelocity = X2.CreateVec2(0, 0)
       For i = 1 To 20
           Dim vec As B2Vec2 = HookCenter.Body.Position.CreateCopy
           vec.SubtractFromThis(SimulationBird.Position)
           Dim angle As Float = ATan2(vec.Y, vec.X)
           If SimulationBird.Position.X < HookCenter.Body.Position.X Then
               Dim length As Float = vec.Length
               Dim force As B2Vec2 = X2.CreateVec2(Cos(angle), Sin(angle))
               force.MultiplyThis(1.5 * length)
               SimulationBird.ApplyForce(force, SimulationBird.Position)
           Else
               SimulationBird.GravityScale = 1
           End If
           SimulationWorld.TimeStep(X2.TimeStepMs / 1000 * 4, 1, 1) '<--- let the simulation play
           Dim v As B2Vec2 = X2.WorldPointToMainBC(SimulationBird.Position.X, SimulationBird.Position.Y)
           X2.LastDrawingTasks.Add(X2.MainBC.AsyncDrawCircle(v.X, v.Y, 10, HintBrush, True, 0))
       Next
   End If
End Sub

Two different approaches to the set a drawtask in Angry Birds Example: https://www.b4x.com/android/forum/threads/angry-birds-example.99058/#post-623653

@Gunter’s roadmap into the game dev world: https://www.b4x.com/android/forum/threads/video-tutorial.99172/#post-624377

1) take the Tank-Example which is the easiest to start
2) then change the TiledMap behind, modify the bodies inside and add some own bodies
3) check the commands and the behavior when changed to a different value
4) see the tank movement (left right and screen clipping etc)
5) change the tank it self by own graphics or sprites

6) go to Clumsy Bird example for sprite animation
7) check for parallax effect and how it is done with the background

8) go for Walking Character example for how collisions detection is done, later may be the Mario Example

9) Check the Joints Example how joints are done. Add new different types of joints
10) build a Rag Doll with Tiled and Joints
10a) check the Collisions Example to avoid the shaggy situations of the Ragdoll

11) add some brain, play around and ask questions here in the forum.

12) google the internet for information like the Box2D manual. http://box2d.org/manual.pdf

13) try to build an extreme simple platformer
-> make a Tiled Map, put your world in there.
-> Tileset and pictures
-> characters

-> setup your world by copy and paste the Tiled code in your project

14) make your characters move around in the world

15) try to add more items by code or change the once you brought by Tiles into your world

16) don't assume that you are creating a milion dollar game at the beginning.
17) just add more complex items features. It is only your sandbox for spoil yourself.

@Gunter’s Helper method to get a perpendicular vector (b2cross, b2dot): https://www.b4x.com/android/forum/threads/vector-x-and-dot-product-for-b2world.99615/#post-626932

Create a polygon and use this polygon to create a bitmap to be used as the preloaded graphic for the GraphicCache: https://www.b4x.com/android/forum/t...o-scaledbitmap-not-drawing.99784/#post-627995

Draw a polygon based on a polygon shape: https://www.b4x.com/android/forum/t...o-scaledbitmap-not-drawing.99784/#post-628010

Tiled and rotated graphics: https://www.b4x.com/android/forum/threads/tiled-and-turned-graphics.100092/#post-629625

It is not good that the cache needs to be cleared too frequently: https://www.b4x.com/android/forum/threads/prototype-planetsgravity.100338/#post-630805

Always use CreateCopy when you modify a vector that you haven't created yourself: https://www.b4x.com/android/forum/t...distance-between-2-bodies.100624/#post-632527

Distance between 2 bodies: https://www.b4x.com/android/forum/t...distance-between-2-bodies.100624/#post-632519

B4X:

Dim v As B2Vec2 = bw1.Body.WorldCenter.CreateCopy
v.SubtractFromThis(bw2.Body.WorldCenter)
Log(v.Length)

Get savely the dimensions for a chain shape: https://www.b4x.com/android/forum/t...widthandheight-chainshape.100702/#post-632924

Change Alphalevel of cached graphic: https://www.b4x.com/android/forum/t...halevel-of-cached-graphic.100730/#post-632998

Better results with an image without antialiasing: https://www.b4x.com/android/forum/t...che-not-available-anymore.101725/#post-638882

Get the width and height of an object: https://www.b4x.com/android/forum/t...h-and-height-of-an-object.102147/#post-641239

World and Screen Sizes: https://www.b4x.com/android/forum/threads/xui2d-world-and-screen-sizes.102649/

Adding 2nd Game-Module: https://www.b4x.com/android/forum/threads/adding-2nd-game-module-is-failing.103010/#post-646062

ScreenPointToWorld: https://www.b4x.com/android/forum/t...e-a-x2-mainbctoworldpoint.103234/#post-647095

B4X:

Sub PanelForTouch_Touch (Action As Int, X As Float, Y As Float)
   If Action = PanelForTouch.TOUCH_ACTION_DOWN Or Action = PanelForTouch.TOUCH_ACTION_MOVE Then
       For Each bw As X2BodyWrapper In X2.GetBodiesIntersectingWithWorldPoint(X2.ScreenPointToWorld(X, Y))
           If bw.Name = "car" Then
               'never do physcial stuff from the Touch event. Only from inside the game loop
               X2.AddFutureTask(Me, "car_touched", 0, "")
           End If
       Next
   End If
End Sub

Create a zoom effect: https://www.b4x.com/android/forum/t...ture-during-the-game-loop.103553/#post-649197

B4X:

Sub btnZoom_Click
    If ZoomFactor = 1 Then ZoomFactor = 2 Else ZoomFactor = 1

    StretchImageViewAsNeeded
 
    'set the world center to be above the tank.
    X2.UpdateWorldCenter( X2.CreateVec2( Tank.Body.Position.X, X2.ScreenAABB.Height / ZoomFactor / 2))
End Sub

Sub StretchImageViewAsNeeded
    Dim width As Int = OriginalWidth * ZoomFactor
    Dim Height As Int = OriginalHeight * ZoomFactor
    Dim parent As B4XView = ivForeground.Parent
    ivForeground.SetLayoutAnimated(0, parent.Width / 2 - width / 2, parent.Height / 2 - Height / 2, width, Height)
    ivBackground.SetLayoutAnimated(0, ivForeground.Left, ivForeground.Top, width, Height)
End Sub

Pause to the Game Loop: https://www.b4x.com/android/forum/threads/wish-add-x2-pause-to-the-game-loop.103683/#post-649986

How to return list of all bodies in a given range: https://www.b4x.com/android/forum/t...t-all-bodies-in-the-range.103847/#post-651088

Move object to another object position: https://www.b4x.com/android/forum/t...o-another-object-position.103901/#post-651593

B4X:

Private Sub MoveEnemy
    Dim v As B2Vec2 = Mouse.Body.Position.CreateCopy
    v.SubtractFromThis(Enemy.Body.Position)
    If v.Length > 0.7 Then ' <--- check, if they are too close to each other
        v.NormalizeThis
        ' you could multiply that v by a scalar to change the speed like:
        ' v.MultiplyThis(1.5) ' >1 = faster, <1 = slower
        Enemy.Body.LinearVelocity = v
        Enemy.Body.SetTransform(Enemy.Body.Position, ATan2(v.Y, v.X) + cPI / 2) ' <--- turning the enemy in player direction
    Else
        Enemy.Body.LinearVelocity = X2.CreateVec2(0, 0) ' <--- yes, too close, therefore stop enemy
        Enemy.Body.AngularVelocity = 0 ' <--- stops the spinning
    End If
 
End Sub

Skipping frame: https://www.b4x.com/android/forum/threads/skipping-frame-and-nothing-show.104364/#post-654119

Find the position of all bodies: https://www.b4x.com/android/forum/threads/track-the-position-of-a-body.104693/#post-656255

B4X:

Dim bodies As List = world.AllBodies
For Each body As B2Body In bodies
   Dim bw As X2BodyWrapper = body.Tag
   If bw.Name <> "" Then
       Log(bw.Name & ": " & bw.Body.Position)
   End If
Next

Find position of body by id: https://www.b4x.com/android/forum/threads/track-the-position-of-a-body.104693/#post-656504

B4X:

For Each bw As X2BodyWrapper In X2.GetBodiesWrappersByIds(Array(IdOfPowerBodyThatYouShouldFindInTiled))
 Log(bw.Body.Position.Y)
Next

Where an image is assigned to the game: https://www.b4x.com/android/forum/threads/space-shooter-image-assignment.104758/#post-656282

Game Assets and tools

Graphics

A set of pixel art game graphics that are completely free to use for any project: https://www.openpixelproject.com/

Public domain graphical tileset for Roguelike games: https://github.com/statico/rltiles

https://opengameart.org/art-search-advanced?keys=&field_art_type_tid[]=9&sort_by=count&sort_order=DESC

https://craftpix.net/

https://www.kenney.nl/assets?q=2d

https://www.gameart2d.com/tileset.html

https://www.gamedeveloperstudio.com/index.php

https://www.gamedevmarket.net/category/2d/

https://www.deviantart.com/search?q=2d assets

https://itch.io/search?q=2d+assets

Reddit List of Assets: https://www.reddit.com/r/roguelikedev/comments/436sop/roguelike_tilesets/

Sounds

https://freesound.org/search/?g=1&q=game&f= grouping_pack:"15480_video+game+sounds+games"

Formulas

(Thanks to @wonder)
Math For Game Developers: https://www.youtube.com/playlist?list=PLW3Zl3wyJwWOpdhYedlD-yCB7WQoHf-My

Geometry: http://onlinemschool.com/math/formula/

Physics: http://physics.info/equations/

Tools

Free "Tile" editor: https://www.mapeditor.org/

Free, The swiss army knife of image processing:http://www.graphicsmagick.org/index.html

Free Animation graphics editor: https://graphicsgale.com/us/

20$, Editor with Special Game Development Tools: https://www.cosmigo.com/pixel_animation_software/features

Gunther’s Exeltool which calculates the Masks according to the categories to which the single category shall collide: https://www.b4x.com/android/forum/t...lator-collision-filtering.103320/#post-647531

Informatix's Scene Editor: https://www.b4x.com/android/forum/threads/scene-editor.107420/

Online "Sprite sheet cutter": https://ezgif.com/sprite-cutter

Additional supports

If you want to see your game get downloads: https://www.b4x.com/android/forum/threads/make-games-with-me.102290/

_____________________________
(To be contiued …)

wyatt420 · Jul 16, 2019

Thank you, this is much appreciated

Erel · Jul 16, 2019

Great tutorial! Thank you for sharing it.
Worth mentioning that X2TileMap is not used just for tile maps. Most examples use it mostly to define the bodies.

ac9ts · Jul 17, 2019

Erel said:
Great tutorial! Thank you for sharing it.
Worth mentioning that X2TileMap is not used just for tile maps. Most examples use it mostly to define the bodies.

Worthy of a Sticky???

Informatix · Jul 22, 2019

Great ! It will help me understand how X2 works. I don't have the courage to dive into a new framework without explanation.

fredo said:
But beware! The XUI2D world coordinate system (left) is different from the computer graphics coordinate system (right).

This depends on the game engine/framework you are using. In libGDX for example, and for everything based on OpenGL, the Y axis points down, so your sentence is a little too generic. Secondly, I don't notice in my use of XUI2D that everything has to be calculated in reverse for the Y axis. I'll leave you to judge with the little example provided. In this example, I make a very simple use of XUI2D to display the fall and then the rotation of two objects in a graphical coordinate system where the 0 is in the top left corner. The two images are drawn exactly where the two bodies are located. There is no scaling or inversion calculation.

If you define gravity with a positive sign, objects are attracted to the bottom of the screen in a coordinate system where the 0.0 point is at the top left. If you define it, as in the examples of X2, with a negative sign, then the objects are attracted in the other direction and you have to reverse everything. There may be an interest in doing this, but it escapes me.

In addition, there is no reason to distribute the objects around the axes considering that the 0.0 is in the center of the screen, as suggested in the diagram. Without the notion of Viewport (XUI2D does not export the class), it doesn't matter to users. And there is nothing to prevent everything from being placed in the positive part of both axes.

EDIT: This message refers to an older version of the coordinate system diagram of XUI2D in these notes that was wrong. There is no need to take into consideration the differences in orientation of the Y axes since X2 and XUI2D use the same Cartesian system. These are the units that differ between the two systems (meters vs. pixels).

Erel · Jul 22, 2019

There is a small confusion about the terminology. In all my posts when I refer to XUI2D I'm actually referring to the X2 framework. The X2 framework is made of XUI2D as the physical engine, BitmapCreator (with a very specific configuration) as the drawing engine and X2 library that connects them and also adds other features.

In the X2 framework:

1. Coordinates are measured in meters.
2. The x axis goes from left to right (similar to the "regular" coordinates).
3. The y axis goes from bottom to top (opposite than the "regular" coordinates).

fredo · Jul 22, 2019

Informatix said:
Great ! It will help me understand how X2 works

Thanks, also for the concrete hint.
But kindly remember that at the moment I only share my notes with the community.
My hints should not be used for planning the next moon landing.

RandomCoder · Jul 22, 2019

One word of warning. A TileSet has to contain more than one tile!
It took me days to work out where I was going wrong with a new project. My approach was to start off small and grow my understanding, but having just one Tile to begin with properly tripped me up.

fredo · Jul 31, 2019

fredo said:
Spoiler: Howto and more details...

For the basic work and data flow with tilemaps a short overview was created in the "X2TileMap" part.

fredo · Aug 5, 2019

fredo said:
Collisions

Information on collisions has been added to the X2BodyWrapper section.

fredo · Aug 30, 2019

fredo said:
Game Assets and tools

Online "Sprite sheet cutter": https://ezgif.com/sprite-cutter added.

It allows you to quickly save the individual graphics from a spritesheet as individual files.

fredo · Aug 31, 2019

fredo said:
Angles in X2

Information about angles have been added to "B2World, Details"

Games Some notes to better understand the XUI2D examples

fredo

Well-Known Member

wyatt420

Member

Erel

B4X founder

ac9ts

Active Member

Informatix

Expert

Attachments

Erel

B4X founder

fredo

Well-Known Member

RandomCoder

Well-Known Member

fredo

Well-Known Member

fredo

Well-Known Member

fredo

Well-Known Member

fredo

Well-Known Member