Games [XUI2D] Example Pack

[Erel]

Updated thread based on X2 v2.0+: https://www.b4x.com/android/forum/threads/xui2d-x2-v2-0-2021.131279/

Spoiler: obsolete

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:

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.

 

[Erel]

Joints example added: https://www.b4x.com/android/forum/threads/xui2d-joints-example.96547/


Depends on XUI2D v0.96.

 

[Erel]

Tank example added:

https://www.b4x.com/android/forum/threads/xui2d-tank-example.96567/

 

[Erel]

Monster Truck example added: https://www.b4x.com/android/forum/threads/xui2d-monster-trunk-example-wheeljoint.96622/

https://www.b4x.com/android/forum/threads/xui2d-monster-trunk-example-wheeljoint.96622/

Requires XUI2D v0.98+

https://www.b4x.com/android/forum/threads/b4x-xui2d-box2d-game-engine.95208/#post-601674

 

[Erel]

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.

 

[Toky Olivier]

Very impressed...

 

[Erel]

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]

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...

 

[Erel]

Added an example based on Ilan's test project: https://www.b4x.com/android/forum/threads/very-very-very-simple-xui2d-test-project.96793/

 

[inakigarm]

Fyi, folder Tetris is included in the example pack but without any file inside it.

 

[Erel]

Made some improvements to the last example:
1. The gear is based on a nicer image.

It looks like this in Tiled:

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.

 

[Erel]

Last update for today:

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:

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.

 

[MaFu]

In the latest X2_Examples.zip most files in the "Files" folders of the examples have a size of 0 bytes.

 

[Erel]

In the latest X2_Examples.zip most files in the "Files" folders of the examples have a size of 0 bytes.

True. Run the project and everything will be fine:
[XUI2D] Cross platform tips

 

[Erel]

Drawing lines example added: https://www.b4x.com/android/forum/threads/xui2d-drawing-lines-example.96934/#post-611418

 

[Erel]

Newton's Cradle:


https://www.b4x.com/android/forum/threads/xui2d-newtons-cradle-example.97029/

 

[Erel]

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

 

[Erel]

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:

src.ColorToARGB(0xFF484848, NewClr)

3. The smoke bodies are only created if the FPS >= 57.

 

[lkching7]

Great ! a Big Step of B4X

 

[Erel]

Support for Tiled v1.2.0 json format added to X2TileMap included in the examples pack.