Various tests by R0J0hound

  • Test 1: Animated 3d mesh.

    Tool capx to convert a 3d animation from many obj files to an array json:

    This is yet another 3d test in c2. The main feature is it is a distorted mesh animation. The idea came about from some recent 3d tests on discord. Loading a simple 3d file format like .obj is simple enough but there is no good simple alternative for a 3d animation. Sure there are .dae .fbx and .glb, but they aren't as simple load.

    This example is done by saving an animation to multiple obj files, then the tool capx is used to fill an array with just the vertex locations for every frame. That is loaded faster in the main capx, not to mention is a bit more compact. Then it's a matter of lerping the vertices from one frame to another to animate.

    There are two modes in the capx controlled by the QUADDRAW constant. When off(or 0) the capx will just draw the animation as a wire frame, which is slower, but should work in C3 since it doesn't do anything fiddly.

    With it on it utilizes mostly javascript to do the drawing and transformation of points. The drawing hijacks an objects drawing function and just uses c2's renderer to draw lots of quads. Other than that the rest is just to make transforming all the vertices faster than doing it via events.


    * There is a pause when it starts as it loads the animation json and parses one object file to get the faces and texture coordinates. The obj parsing can probably be made quicker and maybe cleaner by dropping it into js. As is the most useful speedup was avoiding tokenat to get each line of the file.

    * The javascript used reaches into the c2 runtime and won't work after minifying unfortunately.

    Anyways, this whole thing probably isn't useful for anything but it may be fun for someone to play around with and get some ideas.

    I'll see if i can add to this topic other c2 related tests as i come up with them,


  • Nice work, looks great! Thanks for the animation tool, I might play with this a little bit with the FQZ example Andre and I did. I agree in general it's fun to explore and learn with this type of stuff, not quite sure where it's going yet.

    One interesting example that could work with this might be doing something like Donkey Kong Country Returns in C3/C2 do this with 2d tilemap of environment 2d platform behavior and then 3d render of the character pinned to the player sprite and enemies with just per character self sort (e.g. characters cannot intersect geometry, they just do layers, which is fine for DKC style.)

  • I think the biggest issue is getting the 3D assets to do stuff with. That and an idea what kind of game to do. :) I get caught up on the tech side of things.

    Reusing the 2d movements in construct is a handy idea but I guess we could also go on a tangent of doing our own collision detection. Javascript does make it handy to make reusable chunks of code over events.

    I guess the next step would be to make it work with multiple objects and come up with some kind of game. Maybe walk around and slap balls around?

  • Hello R0J0hound,

    great examples! Can you please explain the converter i bit more.

    Is there a pipeline for e.g. Blender?

    I export complete animations with different .objs?

    Keep up the fire! I love it!

  • totoe

    1. In blender you just export as obj, check “animation” and it will spit out an obj file per frame.

    2. In that converter capx you need to add all those obj files to the files folder, set NUMFRAMES to the number of files, and NUMVERTS to the number of vertices.

    3. In the Ajax call you need to change the name of the files. In the capx it says:

    “Fire_elemental_”&zerpad(loopindex, 6)

    But you’d need to change it to whatever the files are named.

    4. Run it and when it’s done you’ll get a json of the array that you can save to a file. You load that and one obj file of the model in the main capx.

    It all was only done with one object in mind at the moment. But in blender it looks like you can specify what to export and such.

  • R0J0hound

    Great work on the explanations here. I will test it out with some animations. Thanks again for this very usefull infos!

  • Test2:

    Per pixel collision detection with collision normal calculation.

    Also included some simplish physics to interact. Once the arrays are loaded the balls will never miss a collision as they move a pixel at a time in a loop.

    Tech details:

    The wall sprites are in a container with arrays. When the capx runs some js is run that populates the arrays with the collision and normal for each pixel. Optionally it can expand the collision mask by another sprite.

    Note: The js code probably won't work when exporting so some other functions are included to save/load the pixel arrays.


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • nice work R0J0hound this reminded me of something I saw today, have you messed around with Babylon.js at all?

  • Thanks.

    No, I've only briefly messed with babylon.js. I don't really have any 3d assets to make much use of it. Besides I think Construct only gets in the way when using it. It's better suited to be used directly without construct at all. The goal in the example here was to work within Construct's renderer, as well as try out interpolating between frames.

    For 3d to happily coexist in construct with it's renderer there are four approaches that i've seen.

    1. use a separate html5 canvas stacked on top of constructs canvas.

    2. still use a separate canvas, but it's hidden and it's copied to a texture that is drawn by Construct's renderer.

    3. Just utilize Construct's renderer to draw the 3d stuff. Limited, but that's what is happening here.

    4. Use custom webgl to render onto the same canvas that construct's renderer uses, but the complexity here is any webgl state that is changed needs to be restored when done. Best done with custom webgl instead of babylon.js, because construct's renderer and babylon.js both work as if they were the only ones utilizing the canvas.

    Anyways, 3d is still one of my many interests. Got a gltf importer partially working. The format makes more sense now, but I shelved it before making it render anything.

  • I am doing an experiment (in C3) using approach 2. One issue is the time to copy the texture over from the canvas. I am doing something pretty simple focusing on using a model just for a C3 Sprite (e.g. w/o 3D physics, etc.) To handle multiple models, but not do multiple canvases, I used Babylon multi-view to have a separate camera per model, then update the viewports so that they all take up one part of a large canvas. I then transfer the single canvas over as a texture to C3 and use it like a C3 spritesheet to just use the viewport area for each model.

    I also did #4 using Spine's webgl lib (with help from R0J0's insight on how they did that before in C2). It was a lot of trial and error, but in the end worked (though Spine's webgl rendering is definitely simpler than Babylon - Spine is more 2D focused than 3D focused.)

    C3 Babylon experiment:

  • Test 3: Scorched earth style terrain.

    It implements single color terrain that you can erase and draw. It's done with sprites used for one pixel wide vertical spans. I thought it faster than using a sprite per pixel. Construct's renderer really is quite speedy, but the event sheet is pretty slow when manipulating that many objects.

    Since this is done with sprites it will work with the platform behavior. Not sure about the physics behavior since it doesn't behave well with changing sizes of sprites.


  • Can you show a youtube video of these? They look interesting!

  • pillaystation

    It’s more effort than I have time for to make videos of these. I also don’t have a YouTube account.

    Anyways, they are all vanilla c2 so it should be quick to try, even in the free version I’d imagine. They do utilize some js so they won’t work as is in c3.

  • Test 4:

    Circuit simulator via "Node Voltage method"

    An offshoot of some recent forum topics. It allows you to build a circuit out of batteries, resistors and wires. Then it figures out the voltages of each node and visualizes the current flow.


    * left click drag nodes, resistors and batteries.

    * right drag to make wires between nodes, or right drag from empty space to cut.

    * batteries and resistors can be dropped onto wires.

    * right click on batteries to reverse them.

    * double click to destroy node, or create new one.

  • Friends,you are the best game maker what i see, can you help me ?i want to make a Platform enemy AI like that. But i don't know how can do that.(sorry,my english so terrible)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)