Aug 1, 2019
I've recently started exploring the idea of game and application development with Construct 2. I've been wanting to really break into making things like character creation apps for a while now but I guess I was really looking for the right program to try it with. I posted my first mostly complete demo earlier this week and I thought it might be nice to actually post some of the process of how I made it. One of the things that seems to be sorely lacking in Construct 2 tutorials is one for dress-up or character making games so I thought it might be helpful to share a little bit of what I learned in what this program can do in terms of making a game like that.
So far, I have had a good time working with Construct 2 as a program. It has its unique nuances and a learning curve like any program does and since I've only been using it a few weeks I'm still very much in the learning stages. It's a very easy program to learn though, so if Unity scares you and dealing with a lot of text bothers you I would give it a try. I am still dabbling with the free program. If it gets me through a few demo projects with no issues I will probably invest in the paid version.
Please keep in mind that all my demo projects aren't really meant to be fully polished gems. They're basically meant to be guinea pigs that I use while I learn basic programming in Construct 2. The idea is that the demos won't be perfect but by the time I get to a larger project they will have helped me learn the basics and hopefully they can help other people learn some basics too.
If you'd like to see more about the Couple Creator Project or view the demo you can go to http://haevenarts.com/couple-creator/ .
Part I:Deconstructing a Dress-up Game and Finding Educational Materials
The first part of my journey was probably the messiest. As previously mentioned, Construct 2 has no tutorial material specific to dress-up games which is the style of game closest to what I want to make ultimately. Because of having pretty much no materials readily available for what I wanted to do I took a different route of trying to learn through deconstructing something similar made in Construct 2. This proved just as difficult as there are very few dress-up scripts in the Scirra marketplace.
The best one I found was the Anime Dress-up by Ivan Afanasyev. Now for the record, I almost strictly bought this script to rip it apart and learn what made it tick, but if you want a good starter script for a dress-up game I would highly recommend this product. It's really nicely put together and worth the money. Picking the script apart was really helpful for me because I learn by hands-on experimentation, so this was a huge help in figuring out what I needed to learn for that type of game and how the event system in the program worked. The rest of my resources not surprisingly were YouTube videos on specific topics I felt stuck on. Fair warning that these aren't huge tutorials but very brief ones that really helped me out. If they don't do anything for you then keep searching because YouTube is a treasure trove for program tutorials.
How to make a dress-up game in Construct 2
Construct 2 tutorial: Canvas Snapshot
I should also make it clear that I'm coming from the learning experience of an A+ certified IT person. I'm definitely above the bar in terms of catching onto software and programming in comparison to a person with little to no experience with technology so keep that in mind. If I say something is easy but it takes you a few tries or some additional materials then don't get discouraged. We may just be coming from two different places in terms of feeling comfortable jumping into a software and I will try to be thorough and take into consideration some people need more than a basic rundown to learn software.
Before we really dive in any further though, I want to impart what I think are the biggest things you need to have a grasp of before you look at game making in general.
1. Know your strengths and weaknesses.
I went into the process having a lot under my belt in terms of design but not a ton in programming. Any time you take on a creative endeavor it's important to know what you're working with. Understand the skills you're bringing to the table but also take time to identify your weak areas and where you might need to work harder or find alternatives. Even independent developers have a host of marketplaces and software backing them up and filling in gaps here and there. Having an inventory of your resources and skills before you dive into a project makes the whole process much easier to stomach. Appreciate what you can do in house but don't be afraid to seek out other resources to fill in the gaps.
2. Know how much time and money the project requires.
All projects have a budget. If you aren't spending money then you're using precious time. Understand how much time you have in a week to spend on the project and try to figure what if any money the project will cost. If you're on an actual budget, take time to identify where you can cut those costs. You can save time by multitasking or creating assets that can be used across more than one project or part. You can save money by starting out on the lite or free version of a software instead of immediately upgrading. You can use placeholder images in testing until you can afford the assets you need. You can also call on others. Maybe you know an artist who can design the sprites or maybe you know a GUI designer who can give you tips. Identify anything you can do in house. It may increase the time you need to invest but it will save you money. Lastly, don't be afraid to support some freelancers. Many of them do budget work on platforms like Fiver so you can work toward your goals, be friendly to any budget and support another creative.
3. Have a plan in place before starting the project.
When I have a big project, the first thing I do is step away from my laptop and grab a legal pad and pencil. It gives me a chance to really scribble,play and map out the project in real-time with reduced distractions. However you plan, you need to make it a priority. Be able to see the finished application or game in your mind and freeze it there. Having a vision is the most important thing in design,especially for a complex project. You can't have a point A until you establish a point B.
4. Know your audience.
Any time you create you need to know who you're creating for beyond yourself. When it comes to an application or game, this is essential to know when it comes to choosing how the game functions and looks. You have to know who the game needs to appeal to and what their needs and wants will be. As an example, what do you think the difference between a dress-up game and a character creator is? It's easy to tell which one a person is aiming to make by design and features. A simple dress-up has less options,more generic assets and usually a much simpler interface while a character creator has a cleaner look,more complex interface and usually more options for making a truly original character. For me this helped me really determine that I could factor out bells and whistles like audio,fancy animations and even flashy buttons. I knew I wanted to work toward making applications for designers,not casual players, and this allowed me to focus on learning only what allowed me to make essentially a productivity/creativity application. If you figure out who you're making the game for then it will be much clearer what you need and where to trim the fat as your project progresses.
5.Learn to source materials wisely.
Games require a lot of parts and various assets like sprites,music,special effects and scripts. There are a lot of sources out there for these assets and you can save yourself a lot of money by being a smart shopper. Stick to reputable marketplaces and always keep your budget in mind. Construct 2,RPG Maker and Unity all have asset stores with quality assets you don't have to question for the most part. I would also highly recommend Envato which has everything from scripts and 3D models to the most basic graphical assets. Also, keep in mind that you need to buy the correct license. The difference between buying an asset for non-commercial versus commercial usage is a bit more than you think so don't go in thinking you can splurge. Buy what you absolutely need and demand quality. You can even look for sets or bundles to cut your cost down even further or fall back on assets you have from other projects. If there's something you can make in house or acquire for a better deal from a freelancer than go for it. There's no need to rush when it comes to purchasing assets. Scrutinize, comparison shop and crunch numbers to make sure you aren't buying things you don't need or buying the wrong thing. Your budget will thank you.
6. Understand how you learn.
I'm a hands-on learner but it's important to realize that we don't all learn the same way. There's a ton of different ways to learn and just as many resources to cater to each type of learner. Take the time to figure out what works best for you when it comes to learning new skills, because game design is going to be a learning experience. If videos work for you than bookmark YouTube during the project. If written tutorials work better, find a good site for them and save that. If asking an expert questions helps you there are tons of forums on the internet for game design software that can serve that purpose. Game design is intricate and you should go into it seeking knowledge instead of being overly confident. There's no shame in needing to learn something but there is some shame in denying yourself the best learning experience possible.
7. Make organization a priority.
When I started my project I really set myself up by not being consistent and organized with where I was saving everything. When I had to troubleshoot and do my export later this really came back to bite me. Take the time to create folders and a system of organization. The time you waste hunting for where you saved something or scrolling through hundreds of files that could be organized into folders is precious. Set your folders up first and then start making project files to fill them.It will save you a lot of stress further in when all those files start building up.
Part II:Building and Planning the Project
After going through deconstructing the dress-up game script and identifying what I needed to learn, I realized I would need some practical way to apply that learning. That was when I decided that I would come up with some demo or practice projects to use while I tinkered. For the first demo I wanted something simple that would require basic dress-up game mechanics and utilize things I had on hand already.
The assets I had on hand were mostly a lot of characters I generated in ePic Character Generator so I came up with a small project that would allow some basic usage of those. The basic premise of Couple Creator was to allow for the creation of a couple using some pre-made characters. I didn't want to go beyond the basics or fiddle with customization or character building just yet.
My main focus was learning:
- Switching between options for sprites
- A basic randomization function
- A basic reset function
- Basic sprite manipulation such as mirroring,drag and drop etc.
- Being able to save the output
- Basic UI design
- Utilizing multiple scenes like a menu and about section
- A basic background changing option
The result is pretty much what I was going for. It started out simple and got about as complicated as I could reasonably think to make it. Obviously there are other things I could do like more manipulations like resizing or even adding another character but I just didn't see a need to. I may add more characters or a few more basic functions to maybe scale or recolor the sprites but for now it's basically done.
Version 1.4
I made some changes and refinements to the project in version 1.4 which was released on 8/3/19 so I wanted to add some notes to this documentation for the project. Most of the changes in 1.4 were cosmetic. I switched to one primary layout,stepped up my game in the button CSS and created a custom loading screen. I also added over 50 new character sprites to the program. I'm only going to cover the new stuff and the updated button CSS. Also, I'm recycling some screenshots to save time. My new arrangement pictured below is a custom loading screen while the three original screens have been condensed into a much nicer looking single layout.
Creating a Custom Loading Screen
One of the new skills I tackled was creating a custom loading screen. To make this work you'll need to go to project properties which we went over in the previous stuff from the 1.3 documentation below. Where it says "Use Loader Layout" change it from no to yes. This will specify that we want it to switch to a custom loader over the default.
Next you'll need to make a new layout to act as the loader and hop on back over to project properties again to specify it as the first layout in the "First Layout " field.
The key thing to remember for a loader page is that you want minimal graphics. This is because the default loader will show until the content on the custom loader is processed. Depending on your application you may want to add some text or other things on the loader. I just went with a really basic loader with my main logo graphic and the "progress bar" is actually the entire background. I thought that looked a bit cooler than a traditional progress bar and so I went with it.
Here are the events for my loader.
The first part is that you need a system event under "Every Tick" and an action that will set the loading width of your progress bar or an image to the loading progress of the application. I chose to use a tiled background instead of the progress bar because I thought it looked better but you can tailor this to your preferences and even have a text progress meter for a more simplistic approach.
Type in the formula clamp(0, (loadingprogress * [insert width]), [insert width]) and replace the widths with the width of your bar or image. Basically what we're specifying is that the loading progress expression which designates the loading progress of the application will govern the loading of our image up to a certain width. The max width is basically the equivalent of 100%.
Now to advance it to the next scene we need to specify an action for when the progress loads completely. I basically set up an event based on when my tiled background was at full width and a system action to go to the next layout when that happens. However, the tutorial I initially followed instructed doing a system event and choosing "On Load Complete". It worked the way I set it up but for the record there might be more than one way to cook an egg in this software for some functions. It's up to you how you want to do it.
You can go a lot crazier with a loading screen and you can even have a "Play" button instead of an automatic transition to the next layout if you want. I would encourage you to look through the manual for Construct 2 and the tutorials to figure out what works best for your project.
Making Even Nicer Buttons with CSS
In my 1.3 documentation, which you can find below, I go into customizing buttons with CSS. I worked out how to change the font and while I was at it I made some other small but attractive changes . If you want the skinny on how to apply the CSS then check further down but I wanted to share my updated event logs for the CSS for reference. I've basically corrected the one for the font to the correct parameter of "font-family" and the other two govern the border and give it rounded corners to a nicer looking rounded button.
This version was a minor update for the most part and I will try to keep this documentation updated if I do any additional changes worthy of an update.
Version 1.3
The Couple Creator is nothing more than a study of basic functions you would need for the most basic dress-up game. That being said, this isn't really a tutorial on how to make or recreate the application point for point. It's a very simple demo concept that if someone did want to mimic it, that would be an easy task. What I'm going to do instead is go over the functions and programming tied to each part of making the application so you can tailor it to your own project.
To start off, the Couple Creator has three screens. These screens are called "Layouts" in Construct 2. Before we get down to designing anything ,let's set up your base and take a look at your project properties.
How to Add More Layouts
By default you may not have the project toolbar out. Let's fix that.If you don't have "Project Bar" checked then go ahead and do that.This area is really important because it allows you to you edit the different project elements and of course add and edit layouts. I have mine anchored to the right and you can kind of see it listing the different project items. Obviously if you're working with a new project this will look less exciting and you will probably only have one layout which is how projects open by default. The bar on the other side of the work area is the properties bar and we'll come back to that shortly.
I know there's a lot here to look at but let's focus on the project bar.
Decide how many layouts you need first and then go ahead and right click on the little heading for layouts on your project bar. You should see an option to add a new layout. Once you click that, you'll see this.
Go ahead and add the event sheet.You'll probably need it anyways and this is the easiest way to ensure it gets created in the save file.
It's pretty much as simple as that. The thing to pay attention to here is what layout is at the top of the layout listing. The one at the very top is going to be your default or first scene shown when the application runs so pay attention to which one is there. As you can see mine is the menu layout. You can and should take a moment to rename your layouts and event sheets for the sake of your sanity. Just right click on the listed layout or sheet and you should see an option to rename it.
But we have a bit of an issue. The event sheet for your new layout may not show up right away. If you look below my new layout is showing but it doesn't have a corresponding Event sheet.
Go over to your project bar and double click your new event sheet. It will make that new event sheet visible and switch to it.
Now the event sheets are important. This is essentially where your programming will go. Construct 2 uses an event system so it's a bit more intuitive than traditional coding. Each page has and needs its own event sheet so I would suggest keeping each event sheet right next to what layout it governs to reduce confusion.
Adding an event is as simple as clicking where it says "Add Event". It will give you a menu that looks somewhat like this but just imagine it's listing the objects from your project.
Primarily you'll either add a system event or a sprite related event. We'll get into that more a little further down though. For now let's take a look at your project's properties. If you're on another layout that property bar will change accordingly.There should be a link to your project properties if it's switched over from that.
Clicking on that link will show you this.
I won't go into the properties too much because I'm sure there are better references in the Construct 2 manual for that but take a moment to fill in that about section so your project will at least have a unique filename and basic data. You can also designate your first layout here.
Prepping Assets
This project was fairly simple in terms of assets. It was mainly pre-made characters and simple backgrounds. The time it takes to prep assets will vary for every project. I created my assets in ePic Character Generator Pro and Adobe Photoshop. ePic in full with all the packs and the pro version I think is somewhere between $100-$200 and if you can't invest in Photoshop try a freebie like Sketchbook Pro or Gimp. You can even try Sumopaint which is online based.
If I have to buy assets, I generally buy them from the Envato Marketplace which has pretty much everything you'll need for most projects. The part of the marketplace that has vector assets is called Graphicriver and unlike something like say Shutterstock where you have to pay for so many graphic downloads at a time,Graphicriver allows you to buy one at a time. Please be respectful and pay attention to licensing. If you plan to make money off your application, be fair to the creators of assets and buy the commercial license. It's sometimes a bit more but it is the legal way to do things. It's rare you'll get chased down for the wrong license on a stock asset, but if it happens you'll be on the hook for a legal issue. It's better to be safe then sorry.
Another program I would highly recommend for making the best assets possible is a program called Vector Magic which is an amazing piece of software for vectorizing pretty much anything with beautiful and swift results. It has a free online component but if you invest in the desktop version it's well worth every cent.
Taking a Look at the Menu
This screen is a really simple menu with my main logo graphic and buttons going to the two other sections of the application.
The events for this page look something like this.
Here's what you need to know how to do to make a layout like this one.
Adding a Sprite (with a single frame)
Adding a sprite is going to be the most basic task when you create something in Construct 2. Further down I'm going to discuss adding animation frames and why you need to for this type of game but for now we just need a singular sprite.
Right click on your layout and select the option to add a new object. You'll get a screen that looks like this.
Choose to add a sprite and once that box goes away click onto your layout. That should bring up this.
Click on the icon that looks like this. It should allow you to browse for your image
Once your image is loaded up you can edit it if needed and just hit the x to get back to your layout.From there you can just resize it or if you need to edit it you can double-click to get the editor to come up.
Making a Button
Making a button is probably the other thing you'll be doing a lot in addition to adding sprites. I didn't tackle any custom looking or fancy buttons for this project but I plan to attempt it for the next one. Let's just focus on making a basic button and then I'll show you how to spruce it up a little with CSS.
Go ahead and right click on your layout again to add a new object but this time go for a button.Once you click on the layout a button should show there.
You should be able to move it where you want or resize it. You'll also get this on the properties bar.
Just as an FYI, you can change the type from button to checkbox for this object. We want it set to button right now though. The field that says "Text" is what your button will say and the field that says "Name" is the name assigned to the button as an object. Do yourself a favor and name it something meaningful. You'll appreciate doing it when you have to start putting events in.
Applying CSS to Your Button
Now that we have a button ,let's make it look a little better using some simple CSS. My event for this looks like this. Please note that the third one was one that I did a bit wrong and just didn't remove. Couple Creator has black buttons with white text and that's what the first two lines are designating, but I couldn't quite get the font one to work and left it there in case I figured it out later.
First you'll need to add an event. Go to your event sheet and click the "Add Event " option.
Go ahead and select your button and click next. It should bring you to this.
Choose the "is on screen" option and select done. It should look like this on your event sheet.
Now that we have an event, we need to add some actions. In this case our actions will be the CSS styling. Click on the "Add Action" option. It will give a similar set of options to the "Add Event" window.
Select your button again and hit next. You'll want to choose "Set CSS Style" option on this next screen and hit next one more time.
On that next screen you can set what CSS option you'd like to add. The one that comes up first will probably be "color" which will change the text color and if you put in "background-color" that will change the actual button color.
It's up to you how fancy you want to get with the button styling and there's a bit more on it in the actual manual for Construct 2.
One little shortcut I want to show you here is that you can duplicate or copy events just as you would text. This came in very handy when I had to style a bunch of buttons. To do it, just click the event and select the whole thing then right click and select to copy it or hit CTRL+ C. It should look like this fully selected.
Click off to deselect and then click onto the event sheet in a neutral area before hitting CTRL+V. This should paste your event. You can also just right click on the event you want to paste under and choose "paste and it should put it under that one.
You can then just replace the objects/actions on your pasted event.Right clicking on the event area highlighted below should produce a menu that gives you an option to replace an object or action. You can replace it with a different button,sprite etc.
You'll get a similar menu right-clicking on the actions area.
If you want to replace an object or action for multiple lines you can click the first one then the last one while holding shift and it should select them all and replace the item on all of them as well. This is an awesome timesaver if you have a lot of objects that are basically going to need the same parameters such as CSS styling or maybe they have similar functions with slight modifications to the object or action.
I learned a lot about working with events by just digging around and experimenting so I would encourage you to not only check the official manual but also take time to explore the menus for actions and events to get a feel for everything they can do. It's far more than I can even hope to cover in this tutorial but very intuitive if you just poke around a little in my opinion.
Linking Your Button to Another Layout
So now that you have a nice looking button we need to link it to a layout so you have a functioning menu. Start by adding an event and select your button.
Instead of "is on-screen" let's select "on clicked". This means any actions we assign will happen when the button is clicked.
Next go ahead and add an action but this time select the little gear that says "System".
That will get us to this screen where you'll select "Go to layout".
Finally that will bring up this which will allow you to select the layout you want the button to navigate to.
It will give you events that look sort of like this.
Taking a Look at the Main Screen
This screen was the most labor intensive and event heavy of the three and has the majority of the application on it.
For this one I found it really helpful to organize my events into groups. This group was my CSS information for the buttons.
This group was for the main buttons.
This group was for the functions that were related to manipulating the sprites.
Before we cover the actual program functions, let's look at how to create a group so you can organize your larger event sheets and make them as pretty as this one.
How to Create a Group for Events
All you need to do to create a group for a set of events is right click on a blank area of the event sheet. You should see an option to create a group. Clicking it will bring up this.
This should create a collapsible header like the ones on the event screenshots above. This comes in really handy for a layout that requires a lot of events and should really make your workflow more efficient as the project progresses.
Adding a Sprite with Animation Frames
So we've already covered adding a basic sprite and for a scene like this you're going to use that a lot, as well as creating more buttons. I would suggest starting by adding everything basic before tackling events for a larger scene like this one.
For this scene however you'll need a sprite with animations. One of the most basic functionalities of a dress-up game is cycling through the different options for bodies,hair, clothing etc. so we need our sprites to contain all of those options.
For my project I used pre-made single sprites but for a dress-up game or character creator you will simply apply this method to each piece of the character. In other words, you will need to add each element as its own sprite and then create frames for each sprite to create the different options for each one.
A vital tip I want to give for this is that you should prepare and organize all your sprites carefully to make this step easier.
Let's say you have a basic dress-up with say a body,hair,eyes etc. You want to be able to find,select and add those frames as efficiently as possible for this step so I would suggest making a unique folder for each part and putting just the sprites for that part in there. That way you can just do this step and easily grab all the frames without hunting through a ton of files.
To start out we're going to take the same steps we took to add a basic single frame sprite. But instead of clicking that folder icon you'll want to right click on the animation frames box.You want to go to the options of "Import Frames" and do it from file.
This will get you to a point where you can browse and upload your files for the animation frames. Once you select the ones you want and hit open it will add them, as frames but basically appear as one single sprite object.
Once your frames are added you can right-click them to duplicate or delete them or drag them to move them to a different frame. Keep in mind that the frames will start at 0. Since I didn't have a placeholder or starter image, I ended up duplicating my first character for 0 and 1, but I would suggest creating a dummy or placeholder for your dress-up game or character creator for a more polished look.
The next thing we need to do is basically force this sprite to be manually animated for a function we're going to set up later. To do that go to the properties bar and change the speed to 0. If you've closed out of the editor for the spite you won't see this. You can right-click the spite and go to "Edit Animations" to prompt it to show in the properties bar again.
I repeated this step for the background and the other sprite. If you want to do the changing backgrounds make sure you add the background textures as sprites and not tiled backgrounds. The tiled background object doesn't have an option for animation frames.
Setting up the Essential Functions
Once you've added and positioned your sprites and buttons you'll need to actually create some events to creates the essential functions for a dress-up game.
Since we already know how to create an event and an action I ill just get right to what event and action you need to set up for each function.
1.Scrolling /Clicking Through Options
For this function, I had to create what's called a "global variable" on the event page. You can learn more about global variables in the official Construct manual but basically you can think of it as a number or text control. For this we're going to setup a number-based variable.
To create a global variable you'll right-click on a blank are of your event page and choose "Add Global Variable".You'll get a screen like this.
You can leave it at the initial value of 0 for this and hit OK. Your completed variables will look like this.
Each sprite will need its own control so if you have more parts you'll have to make a variable for each one. These variables will actually control the animation frames.
Now that we have the variables let's get to the events and actions.. Your goal here is to get something that looks like this.
Basically what this sets up is to link the clicking of the button to shuffle through the animation frames of a sprite. You'll start by creating an event with your button with the "on clicked " option which we covered already.
Let's take a closer look at the actions though. The first thing you'll need is an action that effectively advances or scrolls through the variable to get a number. Go ahead and add an action then choose system.
Next you'll choose the "Add to" option and get this. You'll want to put in an increment of 1. This means that each time someone presses the button it will add one to the variable specified.
The next action you'll need is to set the sprite animations to the variable. In other words, you want it to choose the animation frame of the sprite based on whatever number value the variable is currently at. As your variable goes up it will essentially force animate or advance the sprite frames. Go ahead and add an action but select your sprite this time. You'll get these options.
You'll want to choose "Set Animation" which will give you this screen. In the animation slot you want to put in the name of the variable you set up. You can set the "From" field as beginning or current. I used beginning which means anytime someone hits the button it will start back from the first frame but if you set it to current it will simply go from whatever frame it's currently on.
The result here is that you'll have a very basic function that scrolls through the animation frames of your sprite when a designated button is hit. I'm sure there are fancier or more polished ways to do this but this is just how I did it and it accomplishes the basic function you'd need for a dress-up game or character creator.
Now because we've set up an animation and the frames on your sprite are limited, we also need to add a stop function or rather a point where our variable will reset to 0. For this we need some system events. The goal is something like this.
You'll start by adding an event and choosing system which will give you this.
You'll want to choose "Compare Variable" which will give you this. You want to set the conditions to be when your variable is equal to the last frame number of your sprite's animations.
Next add a system action and choose "Reset Global Variables". This means that when it hits that last number and also that last animation frame it will reset to the the variable to 0 and with it reset your sprite animation frame to 0.
These steps will essentially create a function where a person playing your game will be able to hit a button and scroll through your options for an item with the options looping when it's gone through all the frames for that sprite.
2.Resetting and Randomizing
I know I look for a random and reset on all the dress-up games I play so I had to figure out how to add them in for this project. I feel like they're staple functions in this type of game or at the very least expected ones.We're aiming for some events that look like this.
For all of these you're starting out with the familiar step of making an "on clicked" event for a button but let's look at the events closer.
To do both these actions we're creating a sprite event which gives us this menu again.
Both of them use the option for "Set Frame" which will give you this screen.
To reset, you simply set the frame to your starting frame which means that when the reset button is pushed it will go to whatever frame you specify here from whatever frame it's currently on.
To randomize, you'll simply put random(insert your total number of frames for the sprite) which will indicate for the system to choose a random number between 0 and whatever number you put there and bring back the sprite frame that corresponds.
3. Basic Sprite Manipulations
I ended up including some very basic sprite manipulations for the project toward the end. I want to make it pretty clear that there's a lot more you can do in this department in addition to what I added, so don't be afraid to dig into the Construct 2 manual a little to make your sprite manipulations more extensive.You might want to do something like allowing the character's size to be changed or even manipulating the colors or contrast. It simply wasn't something I needed for my project so I didn't do it.
These are my events for flipping,unflipping and moving a sprite up a layer.
We've already covered the "on clicked" button event and sprite actions which will ultimately get you here.
For the flipping or unflipping you'll choose "Set Mirrored" and choose the appropriate option. Initially I wanted one button to flip and unflip the character but I couldn't figure out how to do it and ended up doing the two buttons instead.
For the function of moving the character forward you'd choose "Move Forward". I had both of my sprites on the same layer and initially wanted to include an option to move the character back. I ultimately ended up realizing if someone didn't like the arrangement they could just move the other character up to reverse it which is why I nixed a "Move Backward " button on the final result.
4. Saving the Result
I'm sure that this is a big one that you were looking for if you made it this far in the tutorial. I always look for a convenient save option on a well-made dress-up game or character creator so I absolutely had to figure out how to do this function for my project. I think it adds polish and functionality. Not everyone knows to do a screenshot or open the snipping tool so I think the option to save is essential.
To start we need to add a browser object. You'll want to right-click on your layout to insert a new object and way down toward the bottom you'll find one that says browser. It will look like nothing is added after you add this object but just trust me,it's there.
This is our goal.
Let's start with the button event. Set up another "on clicked" event for your save button then add a system action. You should see one that says "Snapshot Canvas".
Clicking that will bring this up. You have options for PNG or JPEG and a space for JPEG quality which maxes out at 100.
You'll also notice I have a text action. This will work similarly to a sprite action and you'll notice that there's a parameter to make it invisible in that menu. The reason I did this is that I had text instructions on my layout that were getting saved on the output. Adding this command was to make it so when someone saved their couple the text would turn invisible and not get saved as part of the picture. You may not need something like that for your project, but I wanted to throw in what that line was there for.
To make the save function come full circle you'll need to also add a system event and choose "on Canvas Snapshot".
Next we need to add an action and if you added your browser object correctly you should be able to add a browser option. You'll want to choose "Invoke Download".
Choosing that will bring this up. You'll set the URL to the snapshot you've set up to have created when someone hits save. You can set up the filename default to whatever you'd like.Make sure you include the extension. Mine didn't work without the extension.
Now you should have a complete save function. If you wanted to have multiple save options you can just rinse and repeat for each save button.
5. Drag & Drop
I will admit up front you need to search for more on this if you want to do a full implementation of drag and drop. I am only going to instruct you on how to add the property to the sprite, but if you want to do more extensive and precise drag and drop, please seek out some tutorials or check the Construct 2 manual. I only really needed it so the characters could be moved to where a person wanted them and it was just a single sprite,not multiple parts. It also didn't include the magnetic component that allows things to be dragged and essentially attached to another object or sprite.
We actually need to be on your layout for this and you'll need to select your sprite. That should make this appear in your property bar.
Click on "Behaviors" and you'll get this box.
Click the plus sign to get this menu. If you don't see drag and drop there at first try searching in the box at the top and it should show up for you.
Once you add it the behavior will be added to your sprite's properties.
Once you close out of that box your sprite will have the basic drag and drop function so it will be able to be moved when grabbed or selected.
Taking a Look at the About Screen
This short but simple screen just has basic information like copyright stuff,links,version info etc. You don't need this type of page in a character creator or dress-up game but it's a nice touch. You could easily cram this and a menu together if that's more your cup of tea or even tailor this to be a page with game instructions.
This is what the event sheet looks like.
We're only going to cover the new action presented on this screen of having a link open in a new window.
You'll start by setting up another "on clicked" event and than add a browser options which will take you here. Go ahead and choose "Open URL in New Window".
That will give you this and you can simply specify the URL.
So that is all for this semi-tutorial. Overall, since this was my first HTML5 project, there's a lot of room for improvement and I would encourage you to use this as a starter,explore the Construct 2 manual for more and really make it your own. If you liked this tutorial please let me know and I will document my other projects as well.