Play Directly In The Anime! Bilibili "Embeds" A Game Made With Cocos
2022.10.11 by COCOS
Games

China’s most popular anime video site, Bilibili, has something new to share with viewers. Now anime can not only be "watched" but also "played."

When you load the video, the protagonist is in the final boss battle and is brewing a big move. The tense fighting atmosphere is at an apex. Suddenly, a prompt pops up on the screen…

You. Yes, you in front of the screen.
This child needs help.
Can I borrow your power?
 

Yes (start the game) /NO I just want to watch the show.

Choose "YES" and you actually start to play the game. If you pass through the many levels, the game's result determines whether the protagonist can "clear the level." Now, as the audience, we have become part of the anime plot, advancing and retreating with the protagonist.

This novel and interesting experience come from the Chinese anime "Pause! Let Me Check The Guide.” The animation tells the story of Liu Yinuo, a 30-year-old social influencer who was accidentally summoned into the game world. To return to reality as soon as possible, he began to assist the 18-year-old "fighter" Tian Enya to save the world. At 11:58 of the finale, a 4-level game is embedded in the anime.

App users can click on the screen to choose to enter the game and control the protagonist to break through the level. If you don’t want to play the game or can’t beat it, you can also choose to watch the animation directly.

It is not uncommon to put games directly into anime, "Pause! "Let Me Check The Guide" innovatively integrates the two mediums and has made an interesting attempt to enhance the user's "following experience." In the animation, users participate in the plot by playing the game. Outside the anime, they can also exchange game experiences and strategies with other audiences, compare their glorious achievements, and even start working on a second ending.

Looking through the comment area of ​​the show, it is not difficult to see that the vast majority of users have shown great enthusiasm for this innovation. When talking about the game itself, many people invariably use one word to evaluate it: "difficult"!

"Pause! Let Me Check The Guide " finale ending with a game was implanted by a "new team with rich experience" of Big Bear Animation in Chengdu, China, who uses Cocos Creator 2.4.6 to develop. Where did the idea of ​​embedding animation in games come from? How does the team create the idea step by step? What makes the game have a "hell-level difficulty"? Today, the main creative team came to chat with us about this special and interesting project.

Cocos: First of all, please briefly introduce yourself!

Card1ac: Game program, three years of development experience, a senior gamer, usually likes to play various games but only likes 2D scrolling games, and is also an amateur FPS game player.

Fox: Game planning, 12 years of research and development experience. This is the first time to cooperate with the director to realize his "wish" to try to combine various types of games with animation.

Rubik's Cube: Game art, four years of art experience. The most significant trouble at present is that it is obviously in an interview, I can't think of any good jokes.

Cocos: Can you share with us the origins of this project?

Fox:  the game was originally a part of the anime "Pause! Let Me Check the Guide" episode 12 (the finale) featured a sequence in which the main character, Tian Enya, enters a breakout game to save her master, Yoo Ino. The director proposed that he wanted to make this episode into an actual playable game and requested that the graphics, difficulty, and experience be "as realistic as possible" and that viewers could access the game directly by the player while watching the anime.

Cocos: How did the game determine its current genre and gameplay?

Fox: Regarding the game idea, I initially wanted to combine various game types, including a high-difficulty horizontal version (similar to the "IWANNA" series) + parkour + fighting battle + audio game barrage. Later, due to the schedule and implementation difficulty, the reasons were adjusted, and finally, the combination of horizontal sidescroller + parkour + barrage was chosen.

This game and animation are tightly integrated, both to achieve the shots the director wants as much as possible and to string together multiple game types with the same mode of operation so that you can feel the process of realization from the director's needs to the actual result (laughs).

Cocos: What is the biggest difference between making a "game embedded in animation" and making games in general?

Fox: Compared with other games, this type of game must be more in line with the anime plot and must be designed around the animation plot. Taking our project as an example, the story background of the game is that Tian Enya entered Liu Yinuo's inner world. In the animation, Liu Yinuo is a hardcore player, and the game levels constructed by her inner-world difficulty can be said to be relatively high. Ordinary levels will definitely not fit the character design, so we can only design the "difficulty" when designing the levels.

Cocos: Indeed, many users have said in the comment area that the game is too complicated, and I have died several times in the first pit.

Fox: After all, the game's difficulty must also be "realistic"! It must be in line with the character design. Tian Enya's difficult rescue of Liu Yinuo must be in line with "Pause! Let Me Check The Guide " anime!

Card1ac: It can be said responsibly that the game can be played! We spent a lot of time tuning the operating feel, and every time we designed a level, we needed to measure it manually at least a dozen times to make sure that the player could pass it normally, and this level was considered qualified. I also recorded a customs clearance video and uploaded it to my Bilibili channel ( https://www.bilibili.com/video/BV1wF411A7zQ ), so friends who are stuck in the game, you can "Pause! Let's see a walkthrough"!

Cocos: The game uses a 2D pixel style. How was the art design considered?

Rubik's Cube: Considering the animation style, we first selected a game style more suitable for the entire project. The pixel style was because most of the game interfaces and maps that appeared in the anime were inserted in pixel style, so we decided to continue the same in the production of this game.

Cocos: What are the standards considered in the technical selection of games? Why choose to develop with Cocos Creator?

Card1ac: Our game is mainly presented to players in 2D style, and Cocos Creator 2.4.x is very mature in 2D and supports HTML5. The developed game package is small and can be efficiently adapted to multiple platforms. The user experience of Cocos Creator can be said to be very good. It is open source, and the engine can be customized. It is very convenient to componentize, and you can hang scripts in the corresponding nodes at will. In addition, the map of our project is basically drawn with TileMap. Big thumbs up for supporting TileMap.

Cocos: Did you encounter any technical difficulties during the development process?

Card1ac: In the process of adding a collider to the map drawn by TileMap, I encountered "ghost collision," that is, walking on two grids with the same y-coordinate of AB, it will get stuck on side A and cannot pass to B. As shown below:

The solution is to combine the colliders on the map into a large polygon and then generate a large polygon collider to solve.

In terms of operating efficiency, the game doesn’t have many levels. We made the four levels into prefabricated bodies, and the player will load to whichever group they enter. To improve the player's experience, the background music is loaded on the initial loading interface (not dynamically loaded).

Cocos: When a user watches an animation on the Bilibili app, he clicks the screen and selects to enter the game. How is this technologically achieved?

Card1ac: Game embedding into online video is essentially an app embedded in a WebView, which needs to be adapted on the website. The packaged WebView file only leaves the index.html and CSS files locally. Other files are placed on the remote resource server, so it is necessary to modify the default web package printed and re-reference various js file paths to the remote server. main.js loading bundles and 3rd party plugins also need to be relocated.

Cocos: “Game implant animation" is a very new form. From your actual experience, what do you think are the advantages and disadvantages of this form?

Fox: I think the game implantation animation is an innovative attempt. The advantage is that players can better integrate into the anime plot and can operate the anime characters by themselves, experience the pain, difficulty, and pleasure of the characters, and resonate with them. What creators need to pay attention to is after the game is implanted with animation, what is the user's experience, whether the animation and the game's efficiency will be affected, as well as other factors.

Cocos: Is it convenient to disclose the new game from the team?

The team's new work, "I am a scholar."

Fox: We always hope players can experience immersive joy from our work! (laughs) We are currently perfecting a business simulation game, "I am a scholar. " If you are interested, you are welcome to experience it. If you can give feedback, I would be even more grateful!