Games [XUI2D] Example Pack

Status
Not open for further replies.

Erel

B4X founder
Staff member
Licensed User
Longtime User
Updated thread based on X2 v2.0+: https://www.b4x.com/android/forum/threads/xui2d-x2-v2-0-2021.131279/

Examples:

- Hello world (based on Tiled)
- Clumsy bird
- Mario
- Space Invaders
- Walking Character
- Tiles Map
- Joints 1
- Tank Attack
- Monster Truck
- Ilan's First App
- Drawing lines
- Newton's Cradle
- Collisions
- Hello World with tiles based background
- Floating Bodies
- Mouse following a path
- Angry birds example
- Space Shooter
- Tetris
- X2 Source Code

Video tutorial explaining the steps required for running the examples and configuring Tiled:
Note that the video is not 100% up to date. It was created before the X2 library was available. All the X2 modules are now packed as a single b4x lib.


The examples pack is a single zip with all the XUI2D examples.
The code modules and files are shared between the projects. See this tutorial for more information: [XUI2D] Cross platform tips


Note that some of the resources were downloaded from: https://opengameart.org/
As well as other open source projects: https://github.com/justinmeister/Mario-Level-1, https://github.com/leerob/Space_Invaders and https://github.com/ellisonleao/clumsy-bird.
The examples are used for educational purposes. Make sure to check the resources licenses if you want to use them for commercial purposes.

Download link: https://github.com/AnywhereSoftware/X2/archive/refs/heads/main.zip
Some of the B4A examples depend on Gestures library: https://www.b4x.com/android/forum/threads/gestures-multi-touch-library.7421/#content

You should also download Tiled map editor: https://www.mapeditor.org/
Most of the examples use a tiled json file to define the objects. In the Mario and Tiles Map example the background is based on a tiles layer.

A properly configured Tiled editor should look like this:

SS-2018-08-24_09.36.45.png


When you first start with Tiled you need to import the custom properties. This is done with:
View - Objects Types Editor - File - Import and find the objecttypes.json that is included in the zip file.

Please start a new thread, in the Games forum, if you have a question about any of the examples.
 
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
Walking Character example was updated. It requires XUI2D v0.99+ (remember that if you see v1.00 then you are using an old version).


This example is a test bed so it is a bit messy. However it includes many features and it is worth going over the code.

The changes in this update:
- Fireworks movement is done with a MotorJoint. MotorJoint is a nice and simple joint. It takes the connected body to the target point. No need to deal with forces or with non-physical behavior.
- Fireworks drawings was simplified. The tail drawing (smoke trail) is an example of drawing a part of cached graphics.
- The horizontal blocks move up with a PrismaticJoint.
- Birds connect to the first "donut" found with a DistanceJoint.

It is really fun to play with the various joints and the results you get look good.
 
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
The X2 framework was updated, this means that all examples were updated as well.

X2Utils now sets a limit to the maximum size of the internal BitmapCreator and lets the (hardware accelerated) target ImageView scale the frames as needed. This change improves the performance of XUI2D games on tablets. The visual result is more or less the same as the resources were scaled on large displays anyway.

With this change as well as a few other optimizations all the examples run at 60 FPS on a 10'' Samsung SM-T580. You can find its benchmark score here: https://www.androidbenchmark.net/passmark_chart.html
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
The examples package was updated. The X2 classes were updated with a few fixes and improvements.
More importantly all the files, except of the layout files, are now shared between the projects. This is done with a custom build action as explained here: https://www.b4x.com/android/forum/threads/xui2d-cross-platform-tips.96815/

It requires B4J v6.50 beta #2+
B4i v5.30 beta #1+
B4A - To be released...
 

inakigarm

Well-Known Member
Licensed User
Longtime User
Fyi, folder Tetris is included in the example pack but without any file inside it.
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Made some improvements to the last example:
1. The gear is based on a nicer image.

It looks like this in Tiled:

SS-2018-09-05_16.05.22.png


The image itself is only used in Tiled to help us position the main gear (the only one with 'graphic file' set) and the other elements.

2. The lines are now thicker so they will look better in Android.

3. Switches are no longer sensors.
4. Switches are drawn last with the 'draw last' option.
5. Category / mask bits are set to prevent the moving grounds from colliding with other elements.

SS-2018-09-05_16.03.09.png
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Last update for today:
SS-2018-09-05_17.28.20.png


This time all the static ground is drawn based on a single image. There is a body named bg with its graphic name (not file!) set to bg.
The background image is added to the cache with:
B4X:
X2.GraphicCache.PutGraphic("bg", Array(X2.LoadBmp(File.DirAssets, "bg.png", WorldWidth, WorldHeight, False)))
The advantage of this approach is that we are not limited to simple lines from the visual perspective. It also looks smoother.
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
I've updated the monster truck example. The smoke is now made of many small bodies:


1. The bodies gravity scale is set to -0.8. This causes the bodies to accelerate upwards.
2. The graphics are created from a single image. See CreateSmokeParticles. Note that only the value of the R channel is used. You can change the target color on this line:
B4X:
src.ColorToARGB(0xFF484848, NewClr)
3. The smoke bodies are only created if the FPS >= 57.
 
Status
Not open for further replies.
Top