Sky Line Plus – Adding 3D to an Endlessly Frigid HTML5 Game

2019.7.26 Interviews by COCOS

Recently, a forum developer “woskymi” shared his new 3D mini-game “Sky Line Plus” on the Chinese forum, made with Cocos Creator 2.1.2.

The planning, art, and programming of this little game were all done by woskymi himself. Recently, woskymi was invited by Cocos to talk to us about his development.

Cocos: Hi, woskymi, can you give us a brief introduction about your 3D mini-game “Sky Line Plus”?

woskymi: “Sky Line Plus” is a 3D endless runner game based entirely on Cocos Creator 2.1.

Right now, only the running level, “Sea Surface Ice Float,” has been launched. The next version is going to add a “submarine diving” level.

The gameplay is straightforward. Press and hold the screen to control the main character to jump power, avoid obstacles, run as long as you can, and get a high score. The camera can also change the game perspective.


“Sky Line Plus” demo

C: Is game development your main job?

w: I am doing business technology management, and programming is entirely out of the bounds of my work. I’m an amateur programming enthusiast. I’m familiar with PHP and JavaScript as I use it for my small-scale enterprise office and data management systems.

C: Why did you build Mini-Game?

w: After working at my job for a long time, it was inevitable that I will encounter some professional bottlenecks, and I cannot find the passion for my current work. About six months ago, I saw the WeChat games were very hot, and I began to try to learn game development. I hope to turn my hobby into a career.

C: Why did you choose Cocos Creator?

w: I didn’t learn the basics of game development. I started to fall into a few pitfalls. So I began to study and use several kinds of engines in China and abroad. I chose the Cocos Creator because I think it is the best suited for me. The engine is powerful and editable, the product is convenient, intuitive, and easy to use, the official tutorial is very good, the forum is very active, and the blog is very timely. For beginners, most of the problems encountered during the development process can find their answers in the forum.

C: What would you tell a beginner if they want to learn Cocos Creator from scratch?

w: In the beginning stages, I suggest that you follow the official documentation and sample source code step by step. Through the study of the documentation and source code, I made a few simple demos and then built a game called “Entrepreneurs” for more than a month.


“Entrepreneurs” game screenshot

The game is a business management game with straightforward gameplay. It has the player earning coins and upgrading the buildings. In this game, the pictures are all made in Photoshop, using a total of 79 images, with full WeChat game functionality. The source code is the only 3.8M.

C: When did you start to develop 3D project development?

w: After getting familiar with Creator through this 2D Demo project, I started experimenting with a 3D project, which led to “Sky Line Plus.”

Compared to the previous one, this 3D project uses fewer images. The material is mainly Low Poly, low polyhedral FBX models, and some material files. It took half a month to realize the basic functions of the game, and because the level of my art design is really limited, the art and special effects took me one month to finish. Various screen sizes made for a much longer than the coding time then I wanted. Source code ended up being 3.1M. I started with Cocos Creator 2.1.1 and then completed with 2.1.2.

I am a game development beginner with limited technology, so I was thinking about it from the early stages. How can I make a better game? My idea was to have a complete understanding of the official documentation I was given and then combine various node combinations with particle effects to build visual effects people would enjoy.

Some people on the Internet said that using the Creator for 3D wouldn’t work well. I don’t think there is a problem. The effect of 3D objects moving and colliding on the screen was straightforward.

C: How did you create collisions in your game?

w: In the “Sky Line Plus,” object collision used a 2d node mounted on the 3d node, using 2d rigid body collision detection, I achieve the running jump effect of a parkour game.

Initially, I wanted to do collision detection in six directions: “up, down, left, right, front, and back.” However, I didn’t understand it. I’ll have to study this more for the future.

C: What development tools were used in “Sky Line Plus”?

w: IDE tools used in the development process include (for reference only): Cocos Creator, Particle2dx free online tools, Cinema 4D, Photoshop, Google Chrome, Sublime Text, WeChat Developer Tools.

The Particle2dx free online tool is very easy to use and can make a variety of particle effects. It’s highly recommended as the dust, smoke, stars, and other effects generated by the tool are in the game.

C: Is there any difficulty in developing 3D games with Cocos Creator?

w: In the process, I did step into a lot of traps, most of which were solved through the official documents and forums. The only thing that needs to be polished is the imperfect 3D material component and the three-dimensional rigid body collision. If this is also perfect, I think there is no game that Cocos Creator can’t develop. If you couldn’t, it means that your creativity and ideas are not strong enough.

C: Is there any experience as a mini-games developer going online that you would like to share with individual developers?

w: If you are making a game for China, it’s best that you apply for software copyright in advance. After I finished the game, I applied for it on May 13th. I went to the website of the Copyright Center and went to the copyright center. I finished it on June 29th, and I will get the certificate on July 15th. Too many months.

C: Is there any plans for a follow-up?

w: Sky Line Plus is not yet complete. The next step is to upgrade the game. I enjoy developing on Cocos Creator, and it’s cool to use! I wish Cocos Creator keeps getting better and better, and I will go one step further in my game development!

C: Thank you, woskymi, thank you very much for your contribution to our forum. Great to think a hobby can become a career, we wish your game career continues to get better and better!

If you would like to try out the game yourself, open WeChat and scan this QR Code into your phone, have fun and share your best scores in the forum.