In my last build I created an ingame level editor, where users can create their own levels and share them with others. Here is a tutorial based on my wall-breaker wave physics game
The Gong
.
Here is the .capxTutorial capx
I note, that this tutorial is not for absolute beginners, because it is using quite complex features and you should have some knowledge and experience about programming in C2.
Movable Menu panels
First thing you need are the Menu panels, where you can drag in sprites and use different actions to manipulate with them. In the beginning the panels and sprites, action icons are outside the screen.
For moving the menu panel to the screen I have two layers, one layer with 100 parallax and the second one with zero-parallax.
I am switching my panels and the buttons that bring the menu on screen between the layers using boolean type variables, testing according to truth table whether first panel is on screen, and second is not and etc. The sprites and icons are pinned to the panels every time when the menu buttons are clicked assuring that they are not left behind when the panels are moved to another layer.
Dragging sprites into layout
Choose which sprites you would like to use in your levels and assign all of them in a family and place them on the panel.
The family has a dragdrop behavior and variables:
menu - for the sprites, that are pinned to the panels, so that they could not be dragged.
drop - when true, the sprite is moved a lower layer. Necessary for dragging, because at first the sprite you want to add is created on the same layer as the panel, on drop it is moved into a lower layer. Otherwise the sprites on screen would start to disturb you.
namer - give names for your sprites, necessary for saving function
function - used to determine whether an action is chosen from the action menu or not. When function=0 dragdrop for sprites is enabled, otherwise not.
I have used the dragging for each sprite separately, because when using the family I started getting random sprites.
Action Panel
Place your icons on the right menu, and assign actions on them.
You can use all sorts of actions in the action panel, you just have to define them. I am using two boolean values to control whether the action is chosen or not.
To view, what all the actions I have defined do, by viewing the help menu of the editor.
Actions
I will explain the more complicated actions:
1)Setting the angle of the sprite
For setting the sprites angle I use nearest to when the sprite is touched. The sprite will be turned towards touch.x, touch.y. You can unchoose the sprite by clicking on the background.
2)Saving
For saving we use a function called save, which I found from the forums. The sprite names, coordinates and angles are saved into an array and the array is then saved into Webstorage as JSON.
3)Loading
The editor is using two ways of loading a previous project. First is from JSON, where you insert a JSON data into the textbox and load the game. The other method uses URL. When you have uploaded some files to a remote location like dropbox you can load them from URL.
4)Downloading a JSON file
First the function "save" is called and then the Arraydata in Array spriteLocations is download as a .json file.
5)Uploading your JSON to remote MySQL database
This is probaly the most complex part of this tutorial, we need a MySQL database for this. I used a service called freemysqldatabase.com, where you get a single database for max 5mb data. As one .json file is in my case about 1kb it is more than enough for me.
You need 2 text type variables for this. One for the display name and the second one for JSON data. First a textbox is thrown, where you enter the display name of your game. Then variables loaded into MySQL Database using AJAX POST and a php fileMy php file
Use other tutorials or search online for MySQL database configuration, this is not C2 specific, I won't be discussing this in the tutorial.
One wierd thing too with the AJAX post, it sometimes gives error when posting, but when I check my database, everything is okay. This is the reason, why Ajax complete and error have the same actions assingned.
Thank you for reading, I hope you got some good ideas for your game. Before starting to create your own editor, I recommend you to try out my game The Gong
for better understanding of the functions of my editor.