Allow me to introduce myself. I'm Ben Ritter, and I'm a veteran of the similar, closed source ClickTeam products like Multimedia Fusion. I'm making the switch to Construct, and I thought I might help the documentation and tutorial efforts by keeping a development journal detailing the features of this young but awesome program, and my solutions to common Construct tasks.
I also make my living as a graphic artist, not a programmer, so my experiences here might be useful for the Construct devs to get some insight on how a visually-minded user like myself approaches their program.
---
For my own enjoyment, I'm resurrecting an old MMF project I barely started years ago in high school. A Star Fox fan game.
Over the course of development, I will be twisting Construct's abilities to suit my unique vision for it. A combination flying shooter, Construct will have to seamlessly switch between above- and side-view scrolling, while handling branching paths, differing environments (space, air, water, and the transition between them), and complex AI and scripting - all the while maintaining a fluid presentation at a high graphical level.
---
Let's take this a step at a time. For just about every level, I'm going to need an infinitely repeating background. Eventually, I will advance this to allow changing backgrounds fluidly on cue to show level advancement.
Construct has already done a lot of the difficult sorting work for me - and I am very thankful as this was an arduous task in MMF. I need to plan ahead of time what elements are background, what are foreground, and what will need to be always kept on a heads up display. At minimum, this will be three layers. I will have to experiment how z position is affected between layers to figure out how to do enemies and the like. Our background will go into the lowest layer.
Other tutorials I've seen across different platforms make a large canvas and move the camera and character. I'm going to go with an option that gives me much more control over the presentation of my applications by keeping a static canvas and moving all the backgrounds themselves.
The tiled background object is well suited for this task. In MMF, this would require multiple instances of a single active background, but the tiled background can be stretched as needed, saving memory and processing.
The challenge here is to make everything seamless. In my case the tile I have is slightly smaller than the canvas. In order to have seamless scrolling of our tiled background, we must set the size in exact multiples of the width and height of our tile, meeting or exceeding one screen in any direction.. essentially 3x the width and height of the canvas minimum.
Now we need to set a movement to our background. I do notice the "Wrap" movement has functions that automate what we are trying to achieve, but playing around with this virtually undocumented function only ended in frustration for me. Instead, I will be using a "Ball" movement, opting to define the wrapping myself.
THIS IS IMPORTANT. We are not wrapping to the canvas size. We need to wrap to the TILE SIZE. Even if your tile is significantly smaller than your canvas, you will not be able to detect the transitions. If you wrap to the canvas size, you will clip your movement and the result will be unpleasant.
First, declare your setup events.
START OF LAYOUT -->
Tiled: Set angle of motion to (desired angle);
Tiled: Set speed to (desired speed - a nice benefit to having a static canvas);
Tiled: Set X to (negative the tile width);
Tiled: Set Y to (negative the tile height);
This will set up the tiled background with at least enough tiles centered on canvas to move one whole tile in any direction. The reason out positions are negative is because the default hotspot is on the top left of the tiled background. We are placing it above and to the left of canvas 0,0. Now we set up events to reset the master position when needed.
TILED X is Greater or Equal to 0 -->
Tiled: Set X to (negative the tile width - same as above);
TILED X is Less or Equal to (negative 2x tile width) -->
Tiled: Set X to (" " ");
TILED Y is Greater or Equal to 0 -->
Tiled: Set Y to (negative the tile height - same as above);
TILED Y is Less or Equal to (negative 2x tile height) -->
Tiled: Set Y to (" " ");
If you add some basic controls to change the direction of movement, you will see that any angle you can throw at it will remain seamless. Because we have separated the X and Y resets, the background can shift somewhat in one direction and hold that shift as the object wraps in another. In fact I will be using this feature later, shifting the background in relation to player movement to add parallax.
It would be ideal if in the future one object could handle all of this for us. In the meantime, this took less than ten lines of code and it withstands vigorous testing so far.
To add some flair, you can layer one background on another, copying and adjusting the events between them. Make one faster than the other, and you multiply the parallax in the process. Very cool.
---
This chapter of my dev journal concludes. I encourage you all to comment with your suggestions and ideas to improve upon this technique - or even prove me wrong if you can. I will also clarify and edit this as needed so long as you point out where I'm lacking with description.
In future editions, I plan on providing source code and pictures.
Until next time!
~Captain Oblivious