Automating the import of hundreds of sprites to Construct

I’m making a game where an area of ground is broken piece by piece. I managed to create a python script that uses a voronoi pattern to shatter my image into several small irregular pieces. Here’s how that looked:

I then needed to import those 200 pieces into Construct. I figured out that if I set the position of each piece to 0,0, they would form the full image perfectly. After that I can just crop the pieces to their actual pixels and things work really nicely: the voronoi jigsaw puzzle comes together like it should.

The only pain point I had left was importing 200 sprites one by one into Construct. I knew that I could drag them all at the same time on top of Construct, which would create an animation. But I needed to create several individual sprites instead of animation frames.

The real life saver in this situation turned out to be the Project Folder feature in Construct (works best in Chrome), since it gives direct access to the project file structure. So here are the steps I performed and the scripts I used:

Please don’t attempt this with your production code, instead start a new empty Construct project and save it as a Project Folder on your local hard disk

1. Use a Python script to loop through all the image files in a folder and have it generate the JSON files Construct expects to have in the objectTypes folder. Here is the script for that (zipped due to security considerations). To run that, just unzip, place it in the same folder with the images, open a terminal there and type: python generateProjectJSON.py and hit enter. A bunch of JSON files should appear which you should copy to your Project Folder’s objectTypes folder.

2. Next the project.c3proj file needed to have the files listed in the items array in this manner:

“objectTypes”: {
“items”: [
“myImage_0”,
“myImage_1”,
“myImage_2”
],

So made a script to generate the array. Note that this is a very simple script and could be improved to support more files name conventions. At the moment it is just adding an incrementing number at the end of each image name. This script will output a simple array in a file called names.txt. Copy the array to your project.c3proj file.

3. The images needed to be renamed with -default-000.png appended to their file name. Time for another script, run this similarly in the folder with the images. After that I copied the images into the images folder inside the Project Folder.

4. That’s basically it but I also wanted the sprites already placed in the layout at coordinates 0,0 so I wrote one more script to do that. Run this script where you have your JSON files (that we generated earlier) and it will give you a new file called new_layout.json. Take the “instances” array from the generated file and merge it with your Layout 1.json file (which can be found in the layouts folder).

Now just reload the project and something magical happens: all your images will appear in the project and in the layout! Even if it’s hundreds or even thousands of images.

So there we have it. This workflow is obviously not useful if you just need to import a small number of sprites. But if you needs hundreds, then this can definitely save you some frustrating manual labor.

Finally, an insanely good pixel art AI

As a 2D game creator, I have been searching for an text-to-pixel art generator AI for a long time. It looks like we have finally arrived! Check out the results I got for the prompt

“a sprite sheet of several pixel art doors”!


Wow! Those are INSANELY good compared to previous pixel art generative AI’s!

So by now you must be dying to know which tool I used to generate those and how much it costs! Well I have good news for chatGPT users! I used Dalle-3, which you can now use for free with a chatGPT subscription! That’s right, since I already subscribe to chatGPT, I generated those awesome images for free!
This is getting really exciting for indie game developers everywhere!

How to concatenate strings and variable values in GDevelop

I’m currently studying the relatively new open source “code free” game engine GDevelop, so I will write some tips and tricks regarding it here.

One basic thing you should learn to do in any game engine is mixing strings and variable values together. The way to do this varies in different game engine.

In GDevelop, you can do this:

"Score is " + GlobalVariableString(myVar)

Anyone can try NeRF now with a free app!

The 3D industry has been buzzing about Nvidia’s Instant NeRF (which stands for neural radiance fields) ever since they published their first demo video.

This technology has since been in rapid development and we now have a free iPhone app called Luma AI that anyone can use to capture NeRFs.

I tested the app with a toy robot, here’s a automatically generated video of the result:

The amazing thing about NeRF renders is that they can handle light reflections and bounces in a very realistic manner. This makes it a good fit for VFX work. We can also export a textured 3D-model from the Luma AI app, but it’s not as impressive as rendering with NeRFs. It’s still quite good compared to a basic photogrammetry process, especially considering that the surface of our object was quite reflective. Here’s a screenshot from Blender:

Here is how the mesh looks like (very dense):

Here’s another cool shot from a Robotime Ball Parkour toy:

@oneminutevideotutorial

Wow! NeRFs are going to be great for displaying products like this!

♬ original sound – user635578337916 –

A tool for recoloring pixel art to a new color palette

I have been searching through the webs for a long time for a good, easy to use tool for recoloring pixel art to a specified color palette. The perfect tool should make it easy and fast to test out different palettes for a provided bitmap image or a sprite sheet, but it should also make it possible to fine tune the color mappings and add new colors to the palette if needed.

This has provided to be a rather challenging task. Photoshop and other similar graphics programs do have the possibility to switch to indexed color which lets you force the image to a new color palette, but I find that workflow to be rather tedious and time consuming. Illustrator has the recolor artwork tool, but it works only with vector images.

Here are some of the tools that I did find:

Continue reading “A tool for recoloring pixel art to a new color palette”

Gamepad not working on a Mac?

Many people are reporting issues with various gamepads/game controllers and Macs. I was able to get a USB gamepad to work on my MacBook Pro (running MacOS Monterey) by installing (from the App store) a tool called Gamepad Mapper. Then I simply mapped the x-axis (which didn’t work at first) to keyboard keys (which my game also supports). I also had to allow this software in the security settings (accessibility submenu).

Now my Retro-bit NES USB controller works just fine with my Construct 3 video game. Check out the game King David RPG here:

https://ecation.itch.io/king-david-rpg

Basics of working with timelines in Scirra Construct 3

Construct 3 has received a long-awaited feature when the Timelines got introduce a few years back. They have been built to be incredibly powerful, but getting started with timeline animation in Construct can feel confusing even for professional animators who are very familiar with concepts like keyframes and eases.

Here are the basic steps you should perform when you want to use the Timeline to create a rotation for an object:

-Right click somewhere in the layout editor and choose Timeline -new timeline

-Drag and drop an instance to the timeline

-Turn on editing (the pen icon)

-Select the instance and change it’s angle value in the properties bar

-Record this change as a keyframe by clicking on the + button to set keyframes

Here’s a few other tips:

-If you want to open the Timeline properties like the name of the Timeline, you need to click on the headers for things like the timeline name or a specific track. Then they will open up in the properties bar. Simply clicking on the Timeline bar itself is not enough.

-If you want to access the Timeline with events, you need to add the global timeline object to the project.

-You can zoom the timeline by scrolling while holding down ctrl

-To change the value of an existing keyframe, you don’t click “set keyframe” as in many other animation programs, but instead change the value, right click on the keyframe and choose “update”.

You can set any instance to play with the timeline using the “Set instance” action. Very handy for giving different objects the same animation.

One way of uniquely identifying a timeline is to give them a unique tag, possibly based on the UID of the instance involved.

If you want to do something with the instance you play with a timeline, one easy option for that is using the “system –> wait for previous actions to complete” action, which will wait for the timeline to finish and allow you to operate on the instance right after that.

One really powerful feature is the ability to add tags to master keyframes (the round ones). These tags can then be used to trigger various events in order to make things happen in sync with your animation.

Construct 3 Rotation Angles Reference

If you have trouble remembering how Construct 3 calculates rotation angles, here is a quick chart for you. Note that movingAngles (which I believe are directional vectors) use a different coordinate system in which values can be also negative.

If you want to to make the movingAngle of the moveTo behavior change the animation of a character to left or right, one option is to do this:

  • System: (bird.MoveTo.MovingAngle+360)%360 within 88 degrees of 180
    -> bird: Set animation to “flyLeft” (play from current frame)
  • Else
    ->bird: Set animation to “flyRight” (play from current frame)

The (angle+360)%360 expression converts the values to a range of 0-360 and then we can simply check if we are within a certain degree of 180 which points left and if that’s true we set the animation to the left one.