C - Finishing touches
The finishing touches are what's left once most of the game is done.
In the case of this project, I'll just address how I did the loader layout, how I used webfonts and image compression.
For most of these processes/features, there are tutorials existing (often made by Ashley) that explain very well how to proceed.
Consider this chapter and project as a complementary "working" example.
1 - Splash/loader layout
The "Loader layout" was a new feature when I started working on this tutorial.
It's simply a property of the project, "Use loader layout", that has to be set to "Yes".
Then the layout set in the project properties as first layout is considered the "Loader layout", or placed as first in the "Layouts" folder.
In this project "Splash" is the first layout.
I followed this tutorial to create a custom loading bar during the loader layout.
In the "Splash" layout, you can find an instance of "LifeBar".
In the code, event 8 and 9 in "esSplash" are there to change "LifeBar"'s width according to the current status of the loading progress.
The system expression "LoadingProgress" is between 0 and 1.
As long as it isn't yet equal to 1, the code sets the "LifeBar's" width to 128 * LoadingProgress.
It's the same idea as for the life bar implementation earlier, but there the bar goes from "empty" to "full" (128 0 = 0; 128 0.5 = 64; 128 * 1 = 128).
This is the role of event 8.
Event 9 happens once the system expression "LoadingProgress" is equal to 1.
It hides the lifebar, and modify the text of "txtFeedback" to notify the player that the loading is complete and now he can proceed to the "Score" layout.
In this project there's no AJAX calls so there isn't much to handle as far as loading goes.
C2 will naturaly take care of loading the sprites for the project and those 2 events will act as a custom loading bar to give feedback to the user.
2 - WebFonts
The webfonts are a feature integrated with the Text plugin.
This tutorial clearly explains how to use the webfonts in C2, and this tutorial allow you to use your own fonts (as webfonts) if you want to customize your game further.
In this project, I simply used already available fonts on Google Web Fonts.
One thing to know is that you need to use the action "Text: Set web font" to "load" the font in your project.
But whatever text object you set the web font too, the font is available for ANY text object in the project afterwards. So you can then "Text: Set font face" and use the name of the web font.
That's why all fonts are loaded (through the "Text: Set web font" action) in the event 1 ("On start of layout") of "esSplash" (the initialisation/loader layout of the game).
I chose the font named "Ceviche One" as a general UI font.
You can see in the event 1 ("On start of layout") in "esScore" and "esGame" how I set the text objects in the page to use this font face.
NOTE: For the new Scirra Arcade, the URL for the webfonts requires to be "https", not just "http". Simply add the "s" in the address works, as Google servers do support the security http layer. If you are getting your webfonts from another server, make sure it's supporting this same security layer.
3 - Image compression
Ashley explained the image compression in that blog article.
In this project, I set most images to "PNG-8" and the images of the "BackSplash" (in "Splash" and "Score" layouts) and "Background" (in "Game" layout) to "JPEG".
To do so I went into the "Splash" layout, went into the animation of the "Asteroid" object, and set the image compression to "PNG-8" and applied it to "Entire project".
From there, I just needed to go into the "BackSplash" object and set the image compression to "JPEG" and applied it to "This frame".
Then, I went to the "Game" layout and opened the animation for "Background" and set the image compression to "JPEG" and applied it to the "This animation".
Now, on export, my "images" folder is "only" 400 Ko.
4 - Exporting the project
To publish to Scirra's arcade, the process is explained in this tutorial and is the reason why I used only built-in plugins as well as set the project's size to be 800X800 pixels.
For this project, the aim was to publish it in the arcade so that it can be a good support for this tutorial.
You're not allowed to just export the content of the capx and try to post it anywhere/try to make money from it as your own.
Anyway if you're using the Construct 2 free edition, you're not allowed to make any commercial use of your games, unless you're a school/institution.
To make sure check the tutorial about how C2 licenses work or send an email explaining your situation to licensehelpouu@scirra.com.
Here is also a tutorial to explain to you how to embed your games on websites.