1. Black Friday Sale - 50% off

    B4A Standard for $29 instead of $59!
    Buy Now
    Dismiss Notice

Games [XUI2D] Example Pack

Discussion in 'Game Development' started by Erel, Aug 23, 2018.

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User


    - 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: www.b4x.com/b4j/files/games/X2_Examples.zip
    Make sure to update to the latest x2.b4xlib: https://www.b4x.com/android/forum/threads/b4x-xui2d-box2d-game-engine.95208

    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.

    Make sure to always use the latest versions of XUI2D, BitmapCreator and X2 libraries:
    Last edited: Jul 16, 2019
    fredo, luke2012, aeric and 22 others like this.
  2. Erel

    Erel Administrator Staff Member Licensed User

  3. Erel

    Erel Administrator Staff Member Licensed User

  4. Erel

    Erel Administrator Staff Member Licensed User

  5. Erel

    Erel Administrator Staff Member Licensed 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: Aug 29, 2018
  6. Toky Olivier

    Toky Olivier Member Licensed User

    Very impressed... :)
  7. Erel

    Erel Administrator Staff Member Licensed 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
  8. Erel

    Erel Administrator Staff Member Licensed 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...
    ellpopeb4a, Toky Olivier and JanG like this.
  9. Erel

    Erel Administrator Staff Member Licensed User

  10. inakigarm

    inakigarm Well-Known Member Licensed User

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

    Erel Administrator Staff Member Licensed User

    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.

    ilan likes this.
  12. Erel

    Erel Administrator Staff Member Licensed User

    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.
    Peter Simpson and Johan Hormaza like this.
  13. MaFu

    MaFu Well-Known Member Licensed User

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

    Erel Administrator Staff Member Licensed User

    True. Run the project and everything will be fine:
    [XUI2D] Cross platform tips
    MaFu likes this.
  15. Erel

    Erel Administrator Staff Member Licensed User

  16. Erel

    Erel Administrator Staff Member Licensed User

  17. Erel

    Erel Administrator Staff Member Licensed User

  18. Erel

    Erel Administrator Staff Member Licensed 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:
    src.ColorToARGB(0xFF484848, NewClr)
    3. The smoke bodies are only created if the FPS >= 57.
  19. lkching7

    lkching7 Member Licensed User

    Great ! a Big Step of B4X
    Erel likes this.
  20. Erel

    Erel Administrator Staff Member Licensed User

    Support for Tiled v1.2.0 json format added to X2TileMap included in the examples pack.
    Johan Hormaza and ac9ts like this.
Thread Status:
Not open for further replies.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice