Monster Escape - Spark AR game Filter

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Inspiration

I am(Tan Duong Ngoc) about to be a father next month (4/2020), This is my first child, I don't seem to have any experiences in taking care of a child. So this is also the time when I start to learn and approach a lot of thoughts to have better understanding of children and prepare everything to be a good father.

In that journey of learning, I came across images of children playing lots of games they enjoy, and I realized that WE ARE OLD, and reluctantly became adults with lots of problems. from ourselves, from society and everything around us. We plunge into a cycle of life at work and put pressure on ourselves. Sometimes, we also need to go back to the old time and play some familiar games as we often did during our childhood. Therefore, this filter was born, as a welcome to my upcoming child

When I received the invitation to join the Facebook Hackathon from Rbkavin, we agreed to set up a team and run a project with Spark AR. The cooperation with an agile programmer who has good thinking like Kavin is a great honor for me and this is the first Spark AR project we have worked with together as a good start for long-term cooperation in the future.

At the beginning, we agreed that the main goal of the project is joining Hackathon. This time is a chance for us to exchange technology, learn from each other and explore our personal limitations. That's why we always look for the craziest ideas, new techniques we've never done before. The project may not succeed (we determined this in the first place), but we all know that we will work hard, try our best to break down barriers and win ourselves.

What it does

Monster Escape is an augmented reality board game that runs on Facebook / instagram cameras. Players will have to roll the dice by tap to screen, take their characters through obstacles and the pursuit of enemies to reach the finish line as soon as possible! The main goal of the game is focusing on the users’ experiences, helping the users have a great gaming experience. Users can go around to see their characters and opponents move through in the real world.

How we built it

• We discussed and divided the work from the beginning. I sent Kavin a draft of descriptive idea including Moodboard, reference, rule and to-do list. We agreed to work together every evening from 8:00 pm to 12:00 am or 1:00 am the next day.
• We build it using spark AD and for 2D we used Photoshop and for 3D we used Cinema 4D. We made the Map and characters and we started doing the game logics. For the path we know the location in the local space so we stored them in the array and based on the die movement we moved the character. When both Character are on same block we killed the first character .So for this we made sure that the character which kills the other character has to do a kill animation before it killed it. We added some power blocks through out those cells has power to move the player or bot two step forward or backward and one has the power to reset the user. On the code logic we move the character one cell by one so that the smoothness is there in the movement of the Character.

We made certain rules that the game will follow

1. Rule

• Players take turns roll the dice by tap the screen
• if the player rolls numbers 1 and 6: The character will be started in the first box or continue to scroll
• If the player shakes 2,3,4,5: The character will move the corresponding number of steps
• If the character moves into the cell that contains the function, the character will have to perform the corresponding action. There are 3 types: — Return to the Start position — Go on 2 steps — Go back 2 steps
• In addition, if the character behind can catch up to the front character, the front one will have to return to the start position.

2. Define the Map

First of all, we sketch a map and agree to keep and go with this map. This makes it possible for us to start with the same purpose without discussing too much about this field.

• Kavin begins writing the first lines of code
• I built a 3D map and the items in it

3. Build the 3d map and Script logic

• The work schedule is updated every day.
• For 3D maps: we spent a lot of time to calculate the number of items and how to model so the file size is not too large, how to compress the texture to ensure the best image quality with smallest file size
• For Script: kavin focuses on handling all cases that may have arisen during the game and offers solutions for each case.
• After I had finished the 3d map model and logic, we started building it with Spark AR, piecing together the code into visual (3D) and making it work.

4. Connect Script Logic with Visual design via Patch editor

When building the map with spark ar is done, we start building the characters and moving. We define a list of actions such as: Selecting a character, displaying a Map, a character starting at the first cell, moving, rotating, attack, colliding with cells containing obstacles ... Based on that list , Kavin gives me variables to transfer data from the script to the Patch editor (from script) Based on the variables provided, we build the moving path, animation for each corresponding action using the patch editor

5. QA

• When the patch was completed, we once again assembled them and tested the accuracy of the logic
• We have tested many times. The process took us lots of time, but fortunately there were not too many issues and we were still in good control

6. Add sound Effect

The final step is adding some sound effects to make the game more attractive.

Challenges we ran into

• Building visuals and users’ experience, user-centered to give the ideas and solve problems.
• Set goals: We agree with setting goals that are higher than what we usually do, implementing a difficult filter and we have never done it before.
• Working time: We are full-time employees for the company, we are afraid of the deadline because it seems that both kavin and I are very busy with our own work.
• For Visual: The first time I did a filter with so many 3d items. The challenge to reduce file size is a major problem.
• For Script: the logic was simple but the time we want to call the elements was a little bit difficult. As most of the -places we need to give some extra times .So the first two versions of code were basically few functions. later version we had to make more functions so it's easy to give delay between them.
• One of the problems was that the time has to be proper, so I had to find perfect time between them.

Accomplishments that we're proud of

• Our first project was completed despite many difficulties
• I was very proud of Kavin when handling the problem very quickly and accepted my crazy ideas
• Learned how to compress image sizes and perform a lot of 3d volumes with the smallest file size but still best quality assurance
• We were very busy, but still on schedule.
• Exceeding the production plan is not only a filter for Facebook but also for Instagram
• We shared this filter with the introduction video on the Spark AR Community group to get feedback from the community. A lot of people love and respond to this filter!
• Making all the functionality work properly without sacrificing any.
• Making the movement smooth and all the game play smooth .

What we learned

In the process of making filters, we have been learning many useful lessons. Fortunately, we agreed on solving the root problem including ideas, scripts, and how to proceed.

• Learn how to plan and work remotely with a filter project
• Need the most detailed brief and script (including logic and time spent on animation) to be able to understand the project most clearly.
• Consensus: at the beginning of the project, we agreed with the map and will follow this map for programming and design. However, during the design process, there were some things in the map such as position, scale, size that changed which took us many hours to process.
• Get out of the old mind: when the project seemed to be 70% complete, we had lots of logical problems, characters didn't work properly, and we spent a lot of time fixing it but didn't find any solution. In that time, we tried a risky job of deleting all, and refreshing our minds, then starting over again. Better results and faster delivery times.

What's next for Monster escape

We will continue to update some new functions for characters, such as:

• Disables skill (when the opponent catches up or enters a box containing obstacles, the character will not be affected)
• Freeze (Freezing opponents to gain turns)
• Replace Bot with the second player (when NetworkModule is reopened). Users will be able to play with friends

Built With

• javascript
• sparkar