Best Cocos Tutorials of 2021 – Part Two

2021.12.29 App/Game Tutorials by Luke

It’s finally the end of the year. We made a promise for the second half of the year to have a tutorial every week, so developers would have something to look forward to every Thursday. Thank you to all the community members for sharing some of their tutorials and our evangelist team for building some amazing videos and other items. 

Next year, we’ve already planned out tutorials for both the young game developers and more experienced. We already have over 20 different ideas, so we’ll keep our promise of a new tutorial every week, with some fantastic videos.

If you want to see our other lists of tutorials, we have our 2019, 2020 tutorials (part onepart two), and 2021 (part one) available.

Video Tutorial Series

Cocos Quick Look

Node Component

UITransform Component

Mask Component

These videos are just the start of us trying to share each of the default components of Cocos Creator in a fun and quick way to get you all the information you need without advertisements, fluff, and nonsense. The humor is there, but not in the way of quickly learning each component.

Video Tutorials

Build An Interactive Map Screen

This video will help you understand how to use masking and add sprites, mouse and finger dragging, and zooming into your game. It’s a great starter project for those wanting to get more familiar with the details of the engine.

Improving Your Video Game Customer Service

Luke shares his years of working in the industry to help developers improve their customer service within their game company.

Text Tutorial Series

Shader Tutorial Series

  1. Basic Introduction
  2. Build A Triangle
  3. Draw More Things
  4. Add Some Texture
  5. Draw Shaders With Cocos Creator
  6. Change a shader with a texture map
  7. Use a Noise Map to Make a Dissolve Texture
  8. Building With WebGL
  9. Alpha Testing and Blending
  10. Blend Testing

Thanks to our hard-working evangelist group, we have both a video and written ten-part series about building custom shaders for Cocos Creator 3.x using WebGL. It’s an excellent series for those wanting to add custom shaders to any game. A video series will be released next month.

Improving your Game Rendering on the body

  1. Skin
  2. Hair
  3. Eyes

If you want to build better games and improve your rendering speed, there are many places to go. But in this tutorial, one developer shares some tips on how to improve your game from a human aspect. A video series of this tutorial is in the works as well.

Text Tutorials

Cocos Creator: Giving A 2D Look For Your 3D Game

Building 3D games with 2D sprites

Building a game that looks 2D in 3D space can be challenging if you don’t understand the tools used to create it. Luckily, one developer shared his experimentation with it and shared sample code to let you try as well.

Cocos Creator: Giving A 2D Look For Your 3D Game

How To Copy Custom Shaders To Cocos Creator

If you love shaders and want that one shader you love in Cocos Creator, thanks to one developer, you can. They share the steps it takes and tests examples to get you on your way!

How To Copy Custom Shaders To Cocos Creator

Building custom characters and animation from 3D models

With 3D coming to Cocos Creator, some developers ask how to create customized 3D characters for their games. We had one share their workflow and how you can follow in their footsteps.

Building custom characters and animation from 3D models

Which Node.js packages work with Cocos Creator

What makes Cocos Creator an impressive Game engine is an open-source software like Node.js. Cocos Creator is compatible with many of the most extensive packages, with more upcoming updates. Learn which are fully compatible for your next game.

Which Node.js packages work with Cocos Creator

Bringing Screen Space Ambient Occlusion (SSAO) to Cocos Creator 3.x

If you want that look of nice shadows in your game, like in Crysis, we discuss how in this tutorial. This is a very advanced tutorial, so be ready.

Bringing Screen Space Ambient Occlusion (SSAO) to Cocos Creator 3.x

Improving multi-device adaptation for Cocos Creator

This tutorial comes from a member working in Tencent talking about how they combat the size issues they can face with multiple phones playing their games.

Improving multi-device adaptation for Cocos Creator

Adding portals And minimaps to your game

If you are trying to build a game with a minimap that updates real-time with a camera into your game or want to build portals to new worlds in your game, then it’s time to check out this tutorial.

Use RenderTexture to Implement Small Maps and Portals in 3D Scenes

Moving your game from Mobile to HTML5

Are you bringing your mobile game to HTML5? Many developers fear bringing their 600+MB game to the web. But one development team could shrink it to 30 MB with little loss thanks to Cocos Creator.

Losing 95% of the size to make “Hundred Scenes of the South of the Yangtze River” into a mini-game

Technical Implementation Details of Frame Synchronization in Games

Ensuring everyone is synchronized in a network game is essential for fun multiplayer gameplay. But what do you do with bad networks, dropped players, and bad pings? With the help of a long-time Cocos game developer, we get some great tips on being prepared.

Technical Implementation Details of Frame Synchronization in Games

Creating 2D real-time shadows

Building shadows for 2D could be a bit hard if it weren’t thanks to this tutorial. This tutorial goes through how its built-in Cocos Creator uses Polar coordinates and Cartesian coordinates, UV space, principles of ShadowMap, and attenuation.

Cocos Creator: 2D real-time shadows through one-dimensional textures

Custom rendering using cc.Graphics in Cocos Creator 

If you are getting started learning how Cocos Creator uses shaders, our star developer GT helps give you the building blocks of what is going on, including code, examples, and more.

Custom rendering using cc.Graphics in Cocos Creator 

Understanding the Coordinate System of Cocos Creator

Understanding the difference between UI and Graphical coordinate system use can help you better understand and use radiographic inspection and conversion of different coordinates.

Understanding the Coordinate System of Cocos Creator

Fixing Jittering and Floating With A Front Facing Parkour Game

The Cocos Store has been putting out purchasable games that include code, graphics, and other assets so you can edit and build your games. One developer shared some tutorials for everyone to learn from with a purchase.

Learn How To Build Your Own Bridge Building Race Game

Learn How To Build Your Own Bridge Building Race Game

Hypercasual front-facing parkour games are all the rage right now, and developers are getting their hands on them. This tutorial shares how to fix jittering and floating issues when you take yours to the next level and add hills and valleys.

Fixing Jittering and Floating With A Front Facing Parkour Game

Improving Your DrawCall In 2D Games

It’s not the most detailed tutorial compared to others, but the quality makes up for the quantity. It’s super important to keep your drawcalls low, so this tutorial gives some tips on how you can improve this.

Improving Your DrawCall in Cocos Creator 2D Games

Adding Dynamic Lighting to Your 2D game

Adding interactive lighting in a 2D game can be a challenge, but we were lucky enough to have a developer build their own version and share with us how they did it in our forums. Probably one of our favorite tutorials of the year.

Demo open source丨Cocos Creator quickly realizes 2D dynamic lighting

Pin It on Pinterest