Episode Select with Cocos Studio

Now that we are working on our second game, we think of applying some lessons learned from our first experience. One of them was the episode select screen which for Bees vs Hornets was implemented using something like a whole screen static map. You can have a glimpse of it here:

It seems that user engagement was a little bit difficult mainly because there were to many things to explore at one time. So why not try a different approach, one that has been already used and confirmed by big names in the industry like King on their flagship product "Candy Crush Saga". The approach is still a map ... but a scroll able one ... where the user has the possibility of exploring a small world but with a single path. No more choices. This is how the end result looks like:

The goal was to create an underwater world , that the use can explore while advancing the game. The levels are presented on a path that spins its way from top to bottom amongst sea-weed , rocks , gates and water bubbles. To create this we had two choices:

  1. do it directly in Cocos 2dx. That would be so time consuming to do. Imagine yourself placing each element on the screen and then rebuilding the solution and running it to see how it looks. We did not like this idea.
  2. use Cocos Studio. At first we had no idea on how to implement what we wanted. But after some digging around we found out that is not that difficult. There are few  tricks to make it look and feel nice but nothing major.

If you are not comfortable with cocos Studio , it would be nice to have a look at their tutorials here. They are not the best resources in the world ... but it is a good start. After getting comfortable with the software this is what we did to achieve our goal:

  • create a new project with an empty scene
  • add a scrollview on your scene. You can find it on you toolbox(usually top-left corner). For our purposes we made it full screen by setting the width and height as 100%. Please note that we are using percentages and not pixels. This will make our scrollview scale perfectly on different resolutions
  • the main catch with our idea is the fact that we wanted to scroll upwards to discover more levels. The default behavior is to scroll down so we rotated the scrollview 180 degrees to achieve our goal. You can do this by going in the Properties Panel(usually on your right) and modify the Rotate option
  • set the scroll area to accommodate for your whole content. This means that you have to do a little calculation to figure out how much area will you need for you whole content to be displayed properly. When you do this calculation you will have to factor in your current design resolution(detailed in a different post). For our purposes 7680px in height for FullHD design resolution was enough
  • start putting you content on the map. This is where you get creative and play a little.

As you can see the steps are not hard to do... once you know what the steps are. Feel free to tell us you experience.


Previous Post Next Post