Tutorial Downloads

File Size
mLoadSaveFlashyMenu.capx295KB

Translations

Know another language? Translate this tutorial!

Stats

660 visitors
1,048 page views

mSaveLoad + mFlashyMenu: Typeable Save/Load Menu

Favourite 6 favourites
Tutorial written by ZebbiOriginally published on 13th, March 2016 - 2 revisions

This tutorial will show you how to create a simple menu that has basic save and load functions that can be named by typing in the keyboard. This system was designed for desktop use but could be adapted for mobile publishing.

Download the capx: https://static3.scirra.net/uploads/articles/5016/mLoadSaveFlashyMenu.capx

This makes use of SpriteFont+ and LiteTween for the menu, and Pause and charcode plugins for this example, it may be possible for this to be done without them but for now, this is how we roll: https://dl.dropbox.com/u/5779181/C2Repo/Zip/plugins/rex_pause.7z
https://dl.dropboxusercontent.com/u/36472942/construct/plugin/wip/charCode/charCode.zip
https://dl.dropboxusercontent.com/u/55358831/lunarray.litetween.zip
https://spritefontplus.codeplex.com/downloads/get/759412

Mirror: https://www.dropbox.com/s/ujqr5sjve2m2g1d/rex_pause%20%282%29.7z
https://www.dropbox.com/s/hy15dr1juzq4409/charCode%20%281%29.zip
https://www.dropbox.com/s/6pw8wydcl1sdqf8/lunarray.litetween%20%282%29.zip
https://www.dropbox.com/s/7kuuqfrl3ao4mrj/spritefontplus.c2addon

It also features code for the flashy menu.

Setup the menu

Here are the globals needed for everything to function correctly:globals
The first few globals control where in the menu we are and the last bunch control the name of the globals.

Here is the initial set-up for hiding the menu and setting up the tweens and flashes:menu

menu
Open full size image

This picks the menu item and sets the flashing:menu
Open full size image

And picking for the save menu:save menu
Open full size image

Here's how we extract the saved game names from localstore, should they be set (by a previous save or player:)save names
Open full size image

Some more flashing:flash
Open full size image

Here's checks for each slot if they're currently in the middle of having their names set:saving
Open full size image

This appends the cursor during save:cursor
Open full size image

Here's how we add whatever is typed to the save game name:
Open full size image

Repeat for a second time:
Open full size image

And a third:
Open full size image

You can continue that for all six slots.

This wraps the selected menu item around when you press up on the top one or down on the bottom one. I used 1 and 2 instead of 0 and 1 as I had already a menu item above save and a few below load from the game I ported this example from, but feel free to adjust the values as needed.

Repeat the selecting method for the load menu:


And our saved load names:
Open full size image
Open full size image

This loads from whichever slot we have selected:
Open full size image

And hides the menu when loaded:
Open full size image

And that's it. Sorry about the plugins and the somewhat un-optimized approach, I'm sure it's possible to be done in less events if compacted together, but this is a fairly clear and easy-to-read way of building a menu like this.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Leave a comment

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