Memory Game Recreation

Having had a play and asked questions, I thought I’d see whether the software could recreate a small application that I recently built for a client using my current HTML5 software.

An example of which can be found here:

The core brief for the project was:

  1. Develop a memory matching game.
  2. The game must be dynamic - IE there will be different content for the matches.
  3. These different contents must be easy to change.

The solution above works by allowing the user to upload a ZIP file of images and an INI configuration file that defines the pairs and other topics data. The game then reads through these various topics banks creating the menu and setting the game images accordingly when a topic is selected.

Yesterday, I started the development of reading the topics and displaying this information on a scene.

This was easy :smiley:: Being able to work with JS directly from the UI made it simple to talk to my existing PHP scripts and then just set the labels on the topic menu scene buttons. I also added a data object property to each button containing the relevant topic information necessary to build the game scene that it would passed when clicked. Overall an excellent start.

A couple of issues that I had were:

I couldn’t find an easy way to copy functions.

  • I tried copying the function from the function pane between open projects.

  • I tried opening the function for editing and copying the actual code from one project to another and also from my external script editor to the project. But this only part works as you can only paste into the body of the function which means you still have to edit the function name and any parameters.

  • I found the export function so exported all the functions from other projects that I had created, but then discovered that I cannot import them back into another project.

I think the last idea would be really useful if you could then import functions (as new or overwrite existing ones) as this would make sharing them between projects such simpler.

Also not necessary but maybe helpful would be an icon next to the functions in the pane that shows the type (normal, scene, etc) of function rather than have to filter them.

Other bits:

I tried to edit an image that was in a current project but it appeared lock? I had to close Saola first and then edit.

And lastly, I love the ease with which you can align elements to other elements but I couldn’t find a way to distribute elements to create an even space between them?

As I said above, an excellent start. The software is proving more than capable and really enjoyable to work with. I’ll add some more once I’ve built the game scene.



Thank you very much for sharing your thoughts, as well as your useful feedbacks.
It would help us a lot making Saola Animate better and better.


Finished version using Saola is here:

Conclusion is that Saola is more than capable of building the type of HTML5 projects that we currently develop. It’s presently less action driven than our current software but that has been in development for decades and for me personally, I prefer to code - which Saola definitely supports.

It is exceeding powerful and well thought-out and the example game above just scratches the surface of what could be possible and design wise, my game is probably not best practice in how to solve problems - but it works and time & practice will will yield even better results.

The points I would raise are about functions with a few other bits that I’ll put into a different topic.

Whilst the function support works, it could be made more user friendly. A few ideas, some already above:

  1. The functions pane needs the ability to sort the functions into alphabetical order.

  2. You should be able to copy and paste the whole function, not just the body from other projects or software.

  3. An import functions to match the export functions would be great.

  4. An icon next to the function in the pane to show type (scene, timeline) would be helpful.

  5. Ability to set the editor font-size.

  6. This is a big request, but code checking is needed or maybe the ability to link / edit using an external application.



Congrats for your first game created by using Saola Animate!

Regarding the function support, I forgot to mention that you can write your code in an external JS file, import into Resources pane, and call public functions of that file in event handlers. Though those functions can’t be listed in Functions pane, but editing them is more convenient. You can edit the original file using an external application then update back to Saola, or edit directly inside Saola.

In the code editor, you can zoom (Ctrl+Scroll mouse) to adjust text size. We’ll consider supporting other ideas if possible, especially the copy/paste ability, .


I think I missed a trick. I’d read about JS files as a resource. But then tried editing my original and nothing happened. I hadn’t seen the restore from oriignal button.

However, unless there is a reason not to, I discovered that rather than edit the original, I can edit the copy Saola places in the project_res folder and as this is the one that is displayed in Saola and copied during publishing. This makes life much easier - thanks.

On this point though, while it works with publish - when I used preview - it didn’t appear to copy the JS file across to the preview folder and therefore failed.

If I can upvote my own suggestions :slight_smile: then having the functions in the function pane sorted by name would be my preferred choice.


Nice game! But I think you can make it better by changing the mouse cursor (pointing hand shape for example) for clickable items like the items on the Topics Menu and the clickable boxes in each game.


Hi Dangle,

Thanks for taking a look at the game and the suggestion. I’ve set the cursor to pointing hand for all clickable elements.