Introduction: The author of this article, Uncle Hana, is a senior UI engineer and an avid game developer. This is his first time developing a 3D game in v3.x. The source code and development video can be found at the end of this article.
I used to make 2D games with Cocos, but this is the first time I have used Cocos Creator 3.x to make a complete game without reusing the previous code.
The game is now available on the WeChat app, the source code is uploaded to the Cocos Store, and I’ve recorded a video of the development process and posted it on the Bilibili, so I suggest you check out the article first and watch the video if you’re interested. I hope these shares will be helpful to you!
Game description
The gameplay is a classic triple match. But unlike the usual 2D graphics, I developed a 3D version this time, so the layers are more realistic. With the lighting, a physical cascading effect is achieved.
The game also has a level editing or auto-random generation mode for quick level creation for admins (PS. The randomly generated levels are all passable~).
For the material part, except for the picture material on the chess piece map, which is a set of 2D fruit icons, all other elements are directly in solid colors. There are two types of 3D models, the character and donkey models are imported from the FBX material I bought online, and the table, pieces, and wooden pallet are made with Blender.
R&D Process
Intended to practice my skills, the game’s development process is relatively simple: planning, material production (piece modeling and instantiation), main program demo production, touch-ups, and shelving. So I won’t elaborate on each step here.
Use of Blender
Since this is the first time I’ve learned Blender to model and apply it to game development, I can mention a few points.
Blender is very lightweight and easy to use, and exporting to Cocos Creator 3.x capable FBX is relatively simple. Just pay attention to the parameters of the spatial orientation conversion. You can learn about them in their pdf.
But there are many shortcuts to remember. For simple modeling, some of the following common shortcuts will be used frequently, such as G for moving, S for deforming, E for extruding surfaces, and I for interpolating surfaces.
There are also some more useful features, such as to achieve chamfering, then there are two ways.
- With modifiers:
- Direct edge chamfering edit:
There are some other essential functions to learn, and probably the fastest way to learn them is to watch instructional videos on Bilibili or YouTube. I watched some basic video tutorials before I started.
Since I had two or three years of experience with Cocos, I found it very easy to get started with v3.x. Basically, many of the features came to me quickly, except for those related to materials or shaders, which took a lot of time to study, so I think I need to find some time to catch up. In addition, since Cocos has been iterating on 3.x so frequently, I suggest you consider keeping up with the latest version to prevent “systemic bugs.”
Compatible with Commercialization practices
Compatible with commercial behavior The commercialization of this game is not too much. It is nothing more than the use of props. The game has three props and a resurrection. These are all incentive behaviors. You can make videos or share the game as an incentive mechanism for callbacks.
Video Ads Compatible (ByteDance, WeChat)
For these props, the callback logic currently implemented on ByteDance and WeChat is not quite the same. The callbacks for video ads are already encapsulated in the ByteDance version (which is also theoretically compatible with WeChat).
After changing the video ad ID, it can be called directly in the appropriate place.
Delayed Sharing Fission Logic (WeChat)
In the WeChat version, we may not need to rush commercial cash initially. At this time, we may need to use the WeChat ecology to achieve fission explosion. We will think of sharing callbacks. The logic to perform is that users can share to get access to a specific prop.
It was easier to implement when the official API had a clear callback event. Still, it was abandoned long ago, and now we can only use a compromise method to implement it.
What does that mean? The mainstream approach is to delay sharing. The specific code implementation could look like this.
if (typeof wx != 'undefined') {
wx.shareAppMessage({
imageUrl: 'https://cdn.wxnodes.cn/lv/share.jpg',
})
wx.tmpAct = act
wx.tmpTime = Date.parse(new Date().toString())
}
var self = this
function act() {
if (typeof wx != 'undefined') {
if (Date.parse(new Date().toString()) - wx.tmpTime < 2000) {
wx.tmpAct = null
return
}
}
setTimeout(() => {
if (cb) cb()
}, 200)
}
}
After changing the video ad ID, you can call it directly in the corresponding place:
if (typeof wx != 'undefined') {
wx.onShow(() => {
if (wx.tmpAct) wx.tmpAct()
})
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline'],
})
}
Define a registration method that will pull up the WeChat share inside and cache the method parameters passed by the custom. Then the time and callback method judgment are made at the time of the WeChat mini-game onshow.
This would achieve the effect of:
- Click on power-up
- Asks if you will share the game for the power-up.
- It gives you a list of WeChat friends to send to.
- Shares what will be placed on their chat.
- You receive the reward
Resource Links
Click to download the source code
https://store.cocos.com/app/detail/4120
Development Videos
A couple more final tips. Developing games still bring pleasure, and I enjoy it. But more and more lately, it seems like my lack of time to learn some of the basics systematically can lead to self-doubt and questions about whether I can make a good game.
If you put aside the program, for example, the learning of graphics, art, modeling, and other related knowledge, these seem to be a little bit of learning to make a decent game with the program, but in fact, the work completed in this way is often difficult to withstand the criticism, to make a fine product, or need to have all aspects, each link must have a certain attainment.
It’s a long way to go, and I think I need to find the time to focus on specific specialties.