Construct 2 is a HTML5 game maker application in similar vain of Game Maker, Multimedia Fusion, Stencyl and whatnot built by a company called Scirra. Along the way I’ve hit a few bumps and limitations using the program but nothing that couldn’t be overcome asking for help on the forums and trial & error.
I will continue to periodically update this blog post with new things I learn along the way, so bookmark it or something.
Scaling on mobile
This is the first problem I encountered using Construct 2 and based on the number of threads you’ll find whilst searching, it is for many other users as well. There doesn’t seem to be any concrete knowledge out there as to how this should be done.
If you’re like me, then you read the supporting multiple screen sizes tutorial on the Scirra website and felt like your questions weren’t really answered that well. The article is correct when it tells you to use aspect ratios and not focus on screen sizes. I am in the finishing stages of a portrait aspect ratio game, so I will only explain how I did it for portrait, landscape should be the reverse (in theory).
- Firstly, set your project window size to: 640, 960 (640px wide by 960px in height)
- Set fullscreen in browser scale mode to: Scale outer (Please note with scale outer, make sure any off canvas objects/sprites are far away from the edges or they could be visible on larger screens)
- Set orientations to: Portrait
- Set Unbounded scrolling on all layers to: Yes
- Set all layer sizes to: 640, 960 (same as project window size)
The above portrait scaling code has been tested and works on iPhone 4, iPhone 5, Samsung Galaxy S III & IV.
Aligning a sprite/object centre (horizontally and vertically)
It is not uncommon to want to align a sprite or object horizontally and/or vertically centre. Once more, everything you come across will recommend using the anchor behaviour.
What if you want to offset a sprite 10 pixels from the left of the screen? My understanding is that you can’t specify offset values for the anchor behaviour.
Perfect horizontal centre (object position X):
(ViewportLeft(Self.LayerNumber) + ViewportRight(Self.LayerNumber)) / 2
Perfect vertical centre (object position Y):
(ViewportTop(Self.LayerNumber) + ViewportBottom(Self.LayerNumber)) / 2
Offset X pixels from left:
ViewportLeft(Self.LayerNumber) + 10
Offset X pixels from right:
ViewportRight(Self.LayerNumber) – 10
Based on the above, you should be able to work out any positioning related issue. However, if you have problems, just let me know in the comments and I can help out where I can.
Fixing Bullet Behaviour Speed/Collision Issues
The bullet behaviour is great if you want a sprite to bounce off a solid with ease, as well as being able to specify gravity, speed and acceleration values. There is however a flaw in how the bullet behaviour works at higher speed 1000+ if you have walls on all four sides, sometimes the bullet will pass through the walls and never return.
The Solution:
There are two solutions to this. You can check if the bullet object is overlapping the wall and reposition it, or you can simply set the width of the left and right walls to be a lot large, and set the top and bottom walls height to also be large.
Physics Behaviour Performance Still Not Great
Construct 2 comes with an awesome behaviour you can apply to your sprites/objects called Physics. It is what it sounds like, but sadly when used in a game where there is already a lot going on, it can suffer terribly from performance and if you can get away without needing to use it, it’ll work out better for you in the long run.
Web Fonts Are Buggy/Hacky
For a HTML5 game maker, Construct 2 suffers from a couple of buggy issues when using web fonts. Issue #1 is the fact that sometimes in Chrome fonts won’t load, especially on mobile and issue #2 is the initial loading of the font means you see the text flash from the fall-back font to the web-font.
There are some interesting workarounds listed in this article and the comments section as well. Sadly, there seems to be no way to load the font without the user seeing it initially load and change (even with a delay added in). The best solution I’ve found so far is to make sure in your font stack you have TTF, SVG and WOFF fonts first in the priority, then EOT for IE.
… Especially when exporting via CocoonJS
If you’re exporting your iOS/Android game via CocoonJS, then you might have noticed webfonts most likely aren’t working. There is a fix for this I’ve found that works on mobile, but won’t work for web (that requires a separate version exported using webfonts).
- Get a copy of your font you are using in TTF format, make it all lowercase and import it into the files folder within Construct 2
- Change all instances of “Set webfont” to “Set font face” and put the name of the font file as the font name, all lowercase
- That’s it!
I have windows on my mac, and it looks fine on the windows, but my buttons look small on the mac computer screen. and then when i opened a link to my game on my phone (iphone5), the buttons became curved (instead of rectangular…like how they are on the layout) so that messed up the aesthetics. Any help is greatly appreciated. thank you so much.
Thanks so much for this blog! Lots of info that should be on Scirra website.
Wow this is amazingly helpful, i couldn’t find anything about positioning something from the edge of the screen.
sir can you help me on my project? i already build it in intel xdk my problem is i dont know where is the lag coming from, i already tried to delete all objects its all clear but when i build it and tried it in mobile its still lag
In the “Scaling for mobile” section it would be nice if you told us what the safe zone(the part that will always 100% appear on all devices) is after making all those changes.