Posted July 19, 2025 by Gregorio
#Quintessential Arctic #Tutorial #Construct 2 #Camera #Visual programming #Big post
Hello everyone!
This post is dedicated to my Arctic Spirit game and the challenges I faced during the development process.
Warning: before the post, it is recommended to familiarize yourself with Quintessential Arctic. Post was written by me for my channels about my personal experience of creating games. Please do not duplicate post in other places without my permission. If you use some little element of the post to create a new one, then you don't have to provide a link to this post, but it's nice! If you want to directly quote a significant part of the post, then provide a link to it. Thanks!
Content:
Even before the actual creation of the game began, it was decided that the camera in the game would be special. It will not be attached to the character as it is usually done. This is due to the specifics of the Classic/Static Camera Horror Jam in which the game participated.
1. Preparation of sprites.
First, let's create two sprites. For convenience, let's call them ScrollTo1 and ScrollTo2. Both sprites must be Window Size (Window Size is specified in Projects Settings). If the Window Size of your game is 640x480, then ScrollTo1 and ScrollTo2 should have a size of 640x480. However, this can be optimized. Since these sprites will not be visible to the player (lines along the edges for ease of development), they can be made 16x12 in size and enlarged to the Window Size at the level.
Once you have created the sprites, give them the Scroll To behavior (Initial state: Disabled).
Oh, yes, add a player's Sprite with the behavior of «8Directions» so that you have someone to play for.
2. Location of sprites.
Now arrange ScrollTo1 and ScrollTo2 in a checkerboard pattern, as shown in the picture. It is important that there is a space between them that is slightly larger than the skeleton of the player's Sprite. This is necessary so that situations do not occur when several ScrollTo Sprites track the player at once.
3. Events.
Let's add four events:
To create a "Not overlapping" event, create an "Overlapping" event, left-click on it and click Invert in the window that appears.
4. Finishing touches.
The last step. All Scroll To sprites must have the Initial State «Scroll To» Disabled by default, except for the sprite on which the player is located at the beginning of the game. This sprite must have an Initial State «Scroll To» Enabled.
1. Create an animations of walking up, down, right and left. As well as animations when the character is standing, looking up, down, right and left.
I know it seems like a difficult task, but practice will help you do even that. I even think that you will return to animation periodically to improve it. I want to tell... give it an opportunity to appear.
2. Name of animations.
I recommend giving animations names that are convenient for work, as they will also be useful to you when working with visual programming.
3. Visual programming.
As you can see, the light is a separate sprite from the character. This is due to its specific purpose, as well as the fact that it has many more pixels and it is simply more convenient to edit these different objects separately.
Of course, it is not necessary to stop the sounds for the animation to work correctly :)
Let's add eight events:
Finally, we got to the really tricky part: the looping snow.
But the indisputable advantage of this method is that it is suitable for creating rain, hail and other kinds of precipitation.
1. Static picture.
Draw a static image of falling snow. It is important that the snow, like the texture for TiledBackground, be looped. That is, if you attach the beginning of the picture to its end, then there will be no seam. It's the same with the right and left sides. The image must be the same size as the Window Size or larger.
2. Duplication.
The snow looks blurry, but it's really just low resolution.
Now select the snow using the Rectangle Select tool and hold down the Ctrl+C keys (this is necessary to add the image to the clipboard). Then create another animation and set its height and width to twice that of the static snow image. After creating this animation, place four static snow images so that they do not overlap each other. To add static snow images, press Ctrl + V (using this keyboard shortcut, the image is extracted from the clipboard).
3. Creating animation.
Now there's going to be a complicated thing that I'm not sure how to explain.
Copy this large frame using the previously voiced method (Ctrl+C). Go back to the previous animation, which is 2 times smaller in size. Create a new frame and add an image to it (Ctrl+V). Then the Paste image sign will appear.
Click «Keep canvas size».
And here it is important to remember the aspect ratio of your snow picture. I have it 4:3.
Position the added image so that the lower-left corner rests against the end of the canvas. After that, according to the aspect ratio, 4 pixels to the left and three pixels down. You may have other pixels.
Now this needs to be repeated many times until the upper-right corner touches the upper-right corner of the canvas (I got 80 frames).
But remember: the last frame, where the upper-right corner of the snow image touches the upper-right corner of the canvas, does not need to be added, because, in fact, it already exists — this is the first frame of the animation!
4. Animation properties.
It's time to adjust the indicators!
Speed — the higher this value, the faster the snow will fall.
Loop — of course, yes! You don't want the snow to freeze in place right in front of the player's eyes, do you?
Repeat count — let me dig into the internet think about it. This thing allows you to repeat the animation a certain number of times... but we already have the loop enabled! Let's leave the value at one.
Repeat to — as written in Construct 2 itself, the frame number to go to when the animation ends. Leave the value equal to zero.
Ping-pong — this is necessary so that the animation, having reached its end, starts playing in the opposite direction. No, I don't think we need snow flying up.
5. How to make snow blurry without resorting to effects.
Left-click on the animation name and click «Duplicate» in the window that appears. This is necessary in order not to lose the clear version of the snow animation.
Now you need to increase the size of this duplicate by 2 or more times. To do this, click the Resize button and multiply the pixels by 2 times in height and width. Check the box next to «Apply to whole animations«». And click on «Ok». That's all!
1. The OGG format does not appear.
For some unknown reason, when exporting WAV format, WAV was converted only to M4A, and OGG could not be converted. An inscription appeared: «Converted to AAC, but failed to convert to OGG».
Solution to the problem: I decided to convert to OGG format separately on special websites.
2. No sound is being played.
In such cases, I recommend that you try to impose toggle disabled on all the playback conditions for this sound.
After doing this, try to open the level with this sound: most likely there will be an unpleasant loud screeching sound. This is the non-working sound. Due to the «Toggle disabled», all conditions are now met and the sound is played every tick. Therefore, the sound was not played due to the unfulfilled conditions. If you are sure that all the conditions are met, then try to cancel «Toggle disabled». Maybe it will work now.
If that didn't work, another way I resorted to was to rename the M4A and OGG sounds, giving them simpler names. However, I can't say for sure that it helped.
I think everything is clear here: when the player moves through a Metal object and no sounds with the tag «WalkMetal» are played, the sound of footsteps on metal with the tag «WalkMetal» is played, and when the player moves through a Snow object and no sounds with the tag «WalkSnow» are played, the sound of footsteps on snow is played. with the «WalkSnow» tag.
Please note! The conditions «tag "WalkMetal "is NOT playing» and «tag "WalkSnow " is NOT playing» are necessary so that ordinary steps do not turn into a screech, mentioned earlier in the «Difficulties» section.
When the player is not moving, the sounds with the tag «WalkSnow», «WalkMetal» stop.
Oh! With the button sounds, it's a completely different song!
When I used the «hovering» sound, which occurs when the mouse overlaps the button, the «if tag "hovering " is NOT playing» condition turns out to be unsuitable for this situation.
If you limit yourself to this, then the sound will be repeated every time it ends, while the mouse overlaps the button (it looks like a clock)! But I wanted the «hovering» sound to be played once every time the mouse crosses the button. Fortunately, I found a way out of this situation.
1. Two animations.
For this method, you need to prepare two animations for the button sprite:
«Default» for a situation where the mouse does not overlap the button...
and «Hovering» for the situation when the mouse overlaps the button.
2. Animations properties.
I keep animations properties by default.
The «Default» animation has one frame.
The «Hovering» animation has two frames: both look the same, but have different frame speeds. The first frame has a frame speed of 0.05, and the second one has a frame speed of 1.
3. Visual programming.
Now, for each button with such animations, you can create an event Mouse:
Mouse: Cursor is over Button and Button: Is animation "Default" playing ➡ Button: Set animation to "Hovering" (play from beginning) and Audio: Play Hovering not looping.
Note: I call them buttons, although they actually have a «Sprite» plugin.
Also, to work properly, need to add another event.
Great! Now the «Hovering» sound will be played every time you hover the mouse over the button.
The third chapter is the final one and deserves special mention. In it, the player must complete a maze distorted by the camera lens.
Two tilemaps were used to create the maze.
The first one performed a decorative function.
The second performed a technical function. When the player collided with him, he stopped. In general, these are walls.
The collision polygon has been changed for each of the tiles. This tilemap is also given the behavior of Solids so that the player cannot pass through its collision polygon. This tilemap has visibility invisible. That is, when completing a level, players will not see it.
Here's what it looks like:
In this section, I will try to answer the question: How to make such an effect?
1. The first layer.
Place the maze and the player on the first layer (actually, my player is located one layer higher, but it doesn't matter in these point tutorials).
2. A layer of darkness.
The layer that is higher than the first layer.
Transparent — no.
Opacity — from zero to one hundred. The higher this indicator, the more impenetrable the darkness.
3. Beam of light.
Place an object like this (something like a beam of light) on the layer of darkness. It must be the same size as the Window Size or larger.
It should look something like this:
4. Really beam of light.
Now go to the properties of the light beam. Select Destination out instead of Normal in the effects.
If a beam of light is located on a layer of darkness, it should begin to illuminate it.
5. Clone.
After that, need to clone a beam of light by right-clicking on it in the «Objects» and clicking on «Clone» in the window that opens.
This clone shouldn't have many other properties.
In the «Effects» section, select «Normal» instead of «Destination out». It is recommended to make the opacity of the clone smaller than that of the original.
Place the clone in the same position as the original.
It will turn out something like:
At this stage, I recommend experimenting with the opacity settings of these two beams of light to find your ideal ratio.
6. Just the white corners of the camera.
Now add a white outline with white corners around the edges. There is also a vignette below it. Both of them are drawn on the same frame.
7. Blue lines.
It's time to add the blue lines! They have a looping animation of two frames, creating a feeling as if these lines are running down.
I recommend making the opacity of the blue lines low. For example, 10. The speed is about 10 frames per second. But this is not necessary. Experiment!
8. The «Fish Eye» effect.
Now let's add this effect to the level:
This is probably one of the simplest steps in the instructions for creating a camera effect.
Click once on the desired layout in the «Projects» section so that the properties of this layout appear on the left.
In the window that appears on the left, in the «Effects» section, click on the blue underlined word «Effects».
Then the «"Name layout": Effects window» will appear. Here you need to click the plus sign.
The «Add effect» window has now appeared. Scroll down to the «Distortion» section here. In it, click on «Bulge».
Adjust the parameter values as you wish.
From the top view, it looks gorgeous!
That's it! If you've scrolled to the very end, then your curiosity is impressive!
You can support me on my boosty! Or you can like and/or repost this post. It will also be a good support! By the way, boosty has already posted a post about my first game released on itch.io and on the Internet in general!