Category: Construct

Posted on

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

Posted on

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.

Posted on

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.

Posted on

Finally a sprite sheet recoloring process that works

I have been searching for a good workflow for testing out different color palettes for existing video game designs.

I have finally found a relatively pain free method of testing different color palettes and applying them to entire games. I will be making a video tutorial about this in the future, but before I get to that, I thought I would already explain the basics of the workflow.

Continue reading “Finally a sprite sheet recoloring process that works”
Posted on

Construct 3 Spritefonts with Photoshop

Creating your own Spritefonts (sometimes also called bitmap fonts) for Scirra’s Construct 3 game engine using Photoshop can be surprisingly tricky. The main difficulty seems to be in creating a grid of evenly spaced characters so that the automatic Sprite font slicing mechanism in Construct can slice them up properly. A monospace font makes this much more simple since all the characters will take up the same space by default, but monospace fonts are quite limiting stylistically. What if you want to have non-monospaced fonts neatly organized in a grid for Construct?

There are helpful tools like “Give Your Fonts Mono” which can convert a regular font into a sprite font and it even generates the spacing data for Construct 3 which you paste into the Spritefont plugin settings. The spacing data looks typically something like this;

[[20,” “],[9,”l|”],[10,”Ii.,;:!'”],[16,”`”],[17,”[]”],[18,”j”],[20,”()”],[21,”t”],[22,”1-\”\/°”],[23,”r”],[25,”f”],[26,”*”],[31,”J”],[33,”u”],[34,”hkns”],[35,”Ldq”],[36,”bcgpz03789?”],[37,”Favy256+=$<>”],[38,”eox4~”],[40,”£”],[42,”BEP#€”],[44,”HNSTUZ_”],[45,”K”],[46,”D&”],[48,”R”],[49,”C”],[50,”VXY”],[51,”AG”],[52,”MO”],[53,”Q”],[54,”mw”],[58,”%”],[69,”W”],[70,”@”]]

You can’t however do any fancy stuff like giving your characters drop shadows, strokes or gradient fills etc. But there is a work around! Just save your tranparent png image from GYFM and open that in Photoshop. Then you can play with layer styles etc as long as you don’t cross the bounding box given for each character. You can increase the bounding box size in Give your fonts mono to give yourself more room. In Photoshop you might need to cut some of the rows into their separate layers for consistent gradients, but other than that this workflow should be pretty straightforward. When done in PS, simply re-save as PNG and import to Construct 3.

Unfortunately Construct doesn’t seem to support kerning at the moment so that would have to be handled with events. It’s not the easiest of programming challenges though.

Another possibility (besides custom events) might be to make a copy of the most difficult characters in the Spritefont sheet and give them special spacing rules. Then you would need to pick that special character in the situations in which your kerning looks bad. That’s also a bit hacky and tedious. So before Construct gets proper kerning support for Spritefonts, it might be best to stick to monospace Spritefonts.

Posted on

Run a simple lightweight Python server

When you are developing websites you often run into the need to test them on a server environment, because browsers block websites with certain features from running locally.

Here is a really quick way to run such a website in a server environment using Python 3 (which you probably have already installed on your machine anyways).

  1. Open the command window where your website root folder is. One easy way of doing that is simply typing “cmd” in the Windows Explorer address bar.
  2. Type this command in the command window: 
python -m http.server 8000
  1. Now simply go to http://127.0.0.1:8000/ in your browser.

If you are getting errors regarding script files with that simple version, you can also try this longer code:

python
#Use to create local host
import http.server
import socketserver

PORT = 1337

Handler = http.server.SimpleHTTPRequestHandler
Handler.extensions_map.update({
      ".js": "application/javascript",
});

httpd = socketserver.TCPServer(("", PORT), Handler)
httpd.serve_forever()

And open that with:

http://127.0.0.1:1337/