Best Cocos Tutorials of 2022 – Part One

This year we have upped the number of tutorials to share with you. This is much longer than past blog posts and has a fantastic amount of great work done by our team and developers worldwide. We must thank everyone on our team and those in our forums for helping the community this year.

In July, we’re going to push even more with a month full of tutorials, the most we’ve shared at once. So check them out on our social media accounts (Twitter, Facebook, and Linkedin).

If you missed the previous ones, you could check them out starting from 20192020 tutorials (part onepart two) and 2021 (part one, part two).

Video Tutorial Series

Introduction To Shaders With Cocos Creator

This 10-part series gives you an understanding of what they do and how to edit created ones to fit your needs.

Improving the look of human characters

We created three videos that look into improving a character look to make it more lifelike without using very demanding requirements. These included:

Written Tutorials

Reverse Time In Your Game

b51e412ddb785d6537f510a118e92864d1cc4082

If you want to build the next physics mind bending game, you should try this amazing tutorial out!

Adding time-reversed gameplay in Cocos Creator to create time backtracking

Quick Tips For Cocos Creator 3.x

Learn some great tips to speed up game development production from our developers at Cocos.

Tips On Being More Efficient With Cocos Creator

Adding 3D Flips To Your Game

640

You don’t need to always have 3D objects to make things look 3D, we give one great example.

Yuefu mutual entertainment shares how to achieve a perfect 3D flip effect Cocos Creator using a 2D camera

Building Cool Water Physics For Your 2D Game

bandicam 2022-01-05 10-10-48-84800_00_00--00_00_20

If you wanted to build some water or any liquid physics to your game, it’s easier than you think.

Using Box2D physics in Cocos Creator to build liquid physics

Intense Introduction To Shaders

shader15

This was built as an added epilougue to the videos on Introduction To Shaders with Cocos Creator. It’s extremely long, extremely intense, and extremely good!

Better Understanding of the Cocos Shader To Build Impressive 3D Effects

Get to know how to do 2D animation

blog-image

This was just supposed to be a simple tutorial for some developers, but it was a very well read story on how to improve your 2D animation.

Introduction To 2D Animation For Game Developers

Adding Complex 3D Models To Your Game

Great step by step look at how to add a 3D model into your game and add it’s textures.

Building Amazing Effects With The Help Of A Familiar Mascot

How You Can Make Great Looking Paint Jobs For Your Game

image

Though it’s a Chinese Cocos Store item, the process is given in much detail to help you understand how the effect works for your own research.

Creating Hyper-realistic Car Paint In Real-time In Cocos Creator

Building An FSM For Better Animation In 2D Games

FSMImage

An FSM is a Finite State Machine. It helps to establish what the player is doing and what actions can happen next. This can help to make your animations run smoother as shared by a developer.

Implementing FSM in Cocos Creator to create silky-smooth character actions

Pathfinding AI for 3D games

image

We share some ideas on improving your A* Pathfinding for your 3D game on Cocos Creator, thanks to a dev building his own extension on it.

Discovering the Best 3D Pathfinding for Cocos Creator

Building 3D looking textures in 2D

2D3DGif1

This one had my head spinning with the unbelievable effort made with this developer. Amazingly great topic for those working in a 2D space. Source code included!

Hardcore Game Engine Magic! Implement 2D&3D Textured Drawing

Decorating Your Components Right In Cocos Creator

When you make a new component for your nodes, you need to make sure you have a way to make it clean and clear for your fellow devs to work with. Why making it clear to understand and follow is great. We share a few examples of what some items in a component can look like.

Decorating Your Custom Components In Cocos Creator

Which Blur Is The Most Effective?

image

We have one Star Cocos developer share the differences of different blurs and how they were able to find the one that fits the best for your next game.

Implementation and Application of High-Performance Blur, Dual Blur, on 2D Sprites

Using Google Chrome For Better Bug Testing

When you run your games for testing, we usually use Google Chrome. Why? It’s developer tools are more powerful than you think. Check out what you can do with it.

Advanced Cocos Creator Debugging Using The Google Chrome Console

Improving Draw Call Performance

image

This great article by Community member Blake shares some ways they were able to keep Draw Calls lower and improve performance.

An Introduction To Draw Call Performance Optimization

Create A 3D Water Surface With Plane Shading

Island

Very cool and detailed look at using shading to get a very close representation without the need of a lot of fancy and memory eating techniques.

Cocos Creator 3D water surface rendering scheme based on plane shading

Using NevMesh for 3D Pathfinding

WeChat Image_20220420100712

Yet another way to do pathfinding for your game. Already great ideas from our developers on our forums.

3D automatic pathfinding comes easy with the NavMesh navigation mesh plug-in

15 Github Projects To Try Out

We had the Cocos team make a list of all the great projects that they are seeing in GitHub and they came back with a lot of really great ones.

15 GitHub Projects To Help You Build Games In Cocos Creator

Make 3D Video Walls For Your 2D Game

640 (1)

Not really much else to say, It looks cool and are easy to make.

Making 3D Video Walls For Your 2D Game

Looking At How Vertex Shaders Work In Cocos Creator

cloud1

Great introduction on what vertex shaders do and how to build them.

What Can The Vertex Shader Do? Cocos Creator Creates A Simulation Of A Cloud Sea

No-Code Your Way To Great 3D Outdoor Scenes

image

We had a great and lengthy introduction on how to build your map with little code understanding. Just follow it step by step and be amazed.

Building a 3D outdoor scene with zero code in Cocos Creator

Building 2D Shading Using SDF

hardshadow

We have had a lot of great love for our first SDF tutorial a few years ago, but this brings it to another amazing level. Learn how to do multiple types of shadows for your 2D games.

Cocos Creator Implements Various Shader Effects Based On SDF 

A Detailed Look At Particles In Cocos Creator

examples

If you were excited about our look at shaders, this one on particles is also just as amazing. Thanks to the Cocos team for building this amazingly long and informative tutorial.

A Detailed Explanation Of The Cocos Creator Particle System. Zero Code Needed!

Setting Up Your Game For Different Phones

DemoExample

Performance on phones are all over the map, so you may need to have a high, medium, and low quality version of your game to get more players. This tutorial gives tips on how to make sure you’re doing it the right way.

Making Your Game Performance Adaptated To Any Mobile Device

Improving Your Asset Loading

image

Learn more insight on how items are loaded from a server and how to improve the speed.

Want To Do More In-depth Load Optimization? We Get Help From One Developer

Adding A First Person Shooter Camera To Your Game

8

iDev Games shares his insights on making an FPS camera for his upcoming game. Great example of the forums solving issues we need solving.

Tutorial: First Person Camera and Controls

Building A Full-Stack Online Game Framework

gameplay

Making sure that your games against opponents are happening at the same time can be hard if you don’t know how it works. This tutorial gives great examples on how full-stack fixes this issue.

Building A Full-Stack Online Game Framework

Improving Collision Detection With Multiple Objects

quadtree

Improve your game’s memory usage with a neat trick involving quadtree when you have hundreds of collisions to detect.

Using A Quadtree For Optimizing Collision Detection

Pin It on Pinterest