Scirra cog

About Us

We're a London based startup that develops Construct 2, software that lets you make your own computer games!

Archives

Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

Creating Klang’s Art and Design in Construct

by Tom | 15th, September 2016

What is Tinimations and Klang?

Hi, my name is Tom-Ivar Arntzen, and I go by the artist name, Tinimations. My background prior to working on Klang was studying fine arts and 3D software. I made the euphoric rhythm platformer Klang, which I’ve been told is quite possibly the most ambitious Construct 2 game ever developed. With exception of composing the audio—which was done by EDM artist, bLiNd—I did everything in the game.

Klang took close to three years to develop, and I’m super stoked to finally release it on Steam for PC Sept. 22. I’m writing this post to spread awareness and shed light on how I was able to make it single-handedly using Construct 2.

Some Quick Links

Why Construct 2?

A friend and I used Construct 2 at a game jam in 2013. In the course of two and a half days, we made a little arcade-style collecting game.

Using Construct 2 was an eye opener for me. As an artist, I never thought making games was an accessible thing, but Construct 2 made it possible. Shortly after the jam, I began planning to bring to fruition a game idea I had been brewing for years.

Construct 2 was the best tool for me at the time.

I checked out my options. All engines I found were either too primitive, or way out of my league in terms of licensing fees and/or reliance on skilled programming staff. Unity wasn’t beginner-friendly enough, and UE4 with blueprint wasn’t out yet. Construct 2 proved super fast to work with during the prototyping and alpha phase, helping me set the game’s identity in stone within a few short months. I also liked the fact that it was 2D only, making it easier to narrow the game’s scope.

Me not being able to program (still can’t!), but having a very efficient art pipeline (which I’ll get to later), made Construct 2 seem like the perfect tool for me.

Default tools gave me very defined restrictions.

I’m usually Mr. Default when it comes to software. I don’t use plugins in fear of compatibility being broken down the line. Sticking to Construct 2’s built-in tools set very clear restrictions for me. If I dreamed up a feature that couldn’t be pulled off relatively easily with the tools given to me, I would scrap it and move on. Luckily the tools given proved to be flexible, reliable and easy to work with. The game’s core mechanic, the “klang,” for example, was made with events balancing the bullet behavior, distance expressions and audio playbacktime (for sync).

Making a rhythm platformer in Construct 2.

The side-scrolling platforming is definately Klang’s biggest link to other games, however, its rhythmic nature makes it quite unique. Keeping this in mind, Klang’s features that I’m most proud of are my custom-made walljump and the “klang” mechanic.

Jump to the beat! Trust me, it feels good!

I remember implementing the walljump in a few hours...err...maybe a day? This was possible thanks to the Platform behavior. Its pre-made features for box2D physics and full control of the X and Y vectors allowed me to make a system that felt super responsive, fast and euphoric. I also added some pinned collision boxes on the player’s sides to ensure one doesn’t have to hug the wall to pull off a jump. Unlike Super Metroid, Klang’s walljump is not a secret technique!

Then there’s THE klang mechanic.

Deflect incoming attacks while running and jumping!

The klang mechanic is the game’s namesake. The player deflects attacks from eight different directions in tempo with the music. It’s powered by a ton of events. In most games, turrets fire bullets at will, which fly aimlessly in the direction they were pointed. In Klang, however, all of this needed to be synced to the music. The turrets had to fire at the correct time and bullets needed to be in an exact location to be deflected to the tempo of the music. This also needed to look dynamic. If the player jumped, the horizontal turrets needed to be below him/her. If the player moved horizontally, the vertical turrets needed to fire at an angle. Anything else would have looked as if the player’s movement had no effect. All of this also had to be done while listening to the game’s soundtrack. I solved this problem by relying heavily on the audio.playbacktime expression, and custom timers set to the buildup and payoff of a beat. Nailing all of this down was a constant balancing act throughout development. Mechanics, however, weren’t the only things necessary to nail in order to make the gameplay feel right.

Smooth camera movement.

Notice the how the camera smoothly follows Klang, and zooms in appropriately.

What I see in a lot of Construct 2 beginners’ games is that the “scroll to” object has the constant exactly relative to the player. This makes movement seem very static. I was guilty of this as well...for a while. However, once I set up dynamic systems for camera panning and zoom, I never looked back. I realized this is an incredibly effecient way for making a game look more polished and professional.

Art

After researching more of the engine’s technical details, I quickly found it to be a perfect match for my pre-rendered 3D graphics pipeline. Construct 2’s preferred way of importing sprites was PNG sequences with alphas. It could even dynamically crop every sprite individually for optimized memory use!

This proved vital for allowing me to make such a large game on my own. 3D tools like Maya and Zbrush have evolved to the point where they’re potentially way faster than hand drawing art assets frame by frame in Photoshop. It’s easier to keep the art style consistent with reusable shaders, and it’s easily scaleable. I knew I would develop my skills as an artist during development, so swift iteration times were important. If I had to redraw every sprite by hand every time I was dissatisfied with minor details like hair length, head size, colors, etc., the game would never ship. Make the change once, click render and you’re done! Construct 2’s compatability with PNG sequences exported from After Effects is largely what makes Klang’s art style possible.

While pre-rendered 3D has been stigmatized over its poor aging from the 16-bit era, I’ll claim it works for Klang because it keeps it clean, void of muddy textures or poor attempts to look realistic.

WebGL effects

Another reason I was able to make Klang look so visually vibrant was the WebGl effects already available in the engine.

Adjust HSL at work while jamming to music!

Water and invert captures a moment of dizzyness.

Video playback during gameplay.

Aww...He’s so happy to see you!

One of my favorite features that got introduced mid development, was support for Webm video. This is something I’ve even had Unity developers express envy over. While video support isn’t necessarily anything new, having it run in parallell with gameplay without loosing performance has enabled me to make some visually memorable moments.

Finishing the game and pro tips.

I can safely say I relate with developers claiming that the last 10 percent of a game’s development is the hardest. Your code base is most likely a huge spaghetti mess at this point, and you’re stuck working on all those tasks you told yourself you’ll do later.

Thankfully, Construct 2’s regular update never broke my game in any way, or forced me to make any last minute changes. I’ve heard so many horror stories from developers how a major revision of their engine forced them to practically remake huge portions of their game from scratch due to a vital plugin being discontinued, or incompatible over night. While I may have encountered a bump every now and again (really wish the iteration times were shorter), Construct 2 is a very stable tool that enabled me to kickstart my game design career on my own terms.

Things I wish I knew when starting out.

I wish I knew from the get go how useful functions are. That alone could have cut my event count by maybe 70 percent.

I also recommend waiting for as long as possible with implementing your game’s art and sound. I threw in a lot of juicy art assets early on, which made iteration times slower due to preview loading times reaching impractical levels.

Learn how to make proper strings and function calls, and use expressions (sometimes your bug is caused by not specifying whether a number is “int” or “float”). Your code will be cleaner, you’ll work faster and you’ll feel like you’re actually programming.

Take the time to learn what all the pre-made behaviors do. Seriously, I spent so much time making my own features for what turned out to already be built-in. Pin and Sine, I’m looking at you!

Turning off image compression and minimizing script on export makes it super fast. Really useful if you want to test how the game’s holding up in its final game form.

Sick of long boot-up times after export? package.nw in your export is a .zip file. Unpack it before booting the game up and distributing it.

Press coverage so far.

While the game’s been in development, the composer and I have toured the world showing it off. So far, the reception’s been amazing, proving that Construct 2 can power competitive game projects in today’s market. Here are a few of my favorite pieces:

Goodbye for now.

Hope you found this post informative and inspiring. If you have any questions, I encourage you to reach out to me on Twitter. And, please check Klang out on Steam to wishlist it ahead of its Sept. 22 launch.

Until next time!

- Tom-Ivar

Now follow us and share this

Tags:

Comments

2
PixelPower 16.6k rep

I saw this game and was in disbelief!! I am witness a game that could very well blow up huge.

Thursday, September 15, 2016 at 3:27:00 PM
3
aJamDonut 1,025 rep

A brief read through and a good long look at the visuals this is blowing my mind and is pretty damn inspiring. I would absolutely love to know more about your WebGL use and how you achieved such great effects.

Good luck at launch!

Thursday, September 15, 2016 at 3:27:27 PM
3
TD Bauer 4,665 rep

Fantastic looking creation using Construct 2! Love it, will buy it for sure when it launches on Steam!

Thursday, September 15, 2016 at 3:29:17 PM
3
Sebastien 7,228 rep

All this hard work seems to be really fantastic, congratulations!

Thursday, September 15, 2016 at 3:31:03 PM
3
tfgames 524 rep

It is very encouraging to see fellow C2 devs doing well. Keep it up and congrats!

Thursday, September 15, 2016 at 3:34:50 PM
3
bclikesyou 3,299 rep

I would *love* to see more posts like this! My game (made in C2) just got Greenlit and I'm constantly scouring for other devs and their advice for seeing this process to the end.

Great job!

Thursday, September 15, 2016 at 3:36:56 PM
2
Bleenx 7,923 rep

Giving a mention of your png sizes and other tricks, such as using video and whatnot, would really help. Everything looks really great.

Thursday, September 15, 2016 at 3:45:35 PM
3
Tinimations 3,156 rep

Thanks everyone!

@aJamDonut The most important thing to know with effects and filters are that they're ultimately just algorithms to mess with the pixels already there. In order for effects to s look juicy, it's important that the source image looks clean and has good color balance (complimentary colors, greyscale contrast etc.). These effects are also expensive. You can only afford to have a few effects on at any given time.

Thursday, September 15, 2016 at 3:47:05 PM
3
Lordshiva1948 40.6k rep

Anyone remember when I said on cgpatel.co.uk that we recommend and highly urge for you to use Construct 2 game developer software for creating games for any platform. Android, IPAD, Tablets, to name few. No hard work involved. Drag and drop. Simplified coding, No fancy syntax to remember. Please note you cannot design 3D game with this software but, if you use 3 rd party plug-in than no problem at all.
Well this person has proved to everyone whom had doubt or hesitation about Construct 2. This is wonderful software (TOOL) to create any type of game excluding 3D. But what is in 3D that so wonderful? I salute and salutation to this person. Well done also to Ashley, Tom and staff at SCIRRA for wonderful job done.

Thursday, September 15, 2016 at 3:49:27 PM
3
Tinimations 3,156 rep

@Bleenx What I usually do is that I snap the hotspot/pivot point to either the center, bottom or upper-left corner on every frame before cropping. That way it's optimized and won't look jittery or janky. What's so great with 3D rendered graphics is if the continuity makes sense in the rendered canvas, you won't have to maniacally move sprites 1 pixel at a time to find that one sprite that ruins the whole spritesheet.

Thursday, September 15, 2016 at 3:50:35 PM
2
Tinimations 3,156 rep

@Lordshiva1948 The main draw with 3D art is that it's a lot more iteration friendly, and you don't have to redraw every element of a character from scratch every time you draw a new frame. Design it once and you're done! 2D still has it advantages in some aspects, but if you're aware of the pitfalls and design your game solely to a medium's strengths, you'll get great results at a rapid pace. I wouldn't be able to make Klang single handedly if I didn't use 3D software.

Thursday, September 15, 2016 at 3:54:29 PM
1
abdalghani 8,546 rep

awesome . . with construct 2 you can make 3D game in 2D enginne

Thursday, September 15, 2016 at 4:30:53 PM
2
chadorireborn 59.7k rep

You are our inspiration @Tinimations ! I hope your game becomes a big success!!!

Thursday, September 15, 2016 at 4:55:48 PM
1
BigPath11 207 rep

Tinimations you've construct 2 really proud... I am really motivated as I read this post now... Great Job Bro!

Thursday, September 15, 2016 at 5:11:07 PM
1
DiVeR 1,547 rep

Beautiful and so excited to see it released soon! Thank you for sharing this, it comforts me in the idea that C2 is great for imported 3D art and that it can manage sound out of the box. Awesome !

Thursday, September 15, 2016 at 5:22:44 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.