Writing in the front

Due to the business needs of the company, I recently learned the development of CocosCreator, a game engine, and launched a game based on it. Therefore, I am writing this series of articles to record my learning process from entry to project release.

One of the biggest differences between interface game engines like CocosCreator and Egret from Web development is the visual UI editing and a set of highly packaged and integrated tools like animation editing, physics engines, and resource management systems. So in this first article, I’ll focus on what I learned about the cocos workflow as I moved from Web development to game development. Although there is an introduction in the document, many things were ignored by me at the beginning. As the project progresses, I have learned some small methods and configurations that can improve efficiency from the document and the community intermittently. I will record them here for the reference of other newcomers

Familiar with the editor

Because the interface editing of the game is completed through the editor, some basic functions and operation instructions of the editor need to be understood and familiar with through the document. I will record several Settings that I must be able to use for a new project here

Configuration Item Settings

Before you start a project, don’t forget to set the following configuration in project-project Settings. These Settings will be used by default for every new scenario, so you don’t need to set them for every new scenario

  • Initial preview scene (specify a scene/currently open scene), I usually set the latter
  • Design resolution, engine default is 960*640
  • Fit mode (fit-height/fit-width)

Adjust the editor layout

At work, because we’re binding resources, scripts, and variable by drag and drop them to the process of the properties panel, and the default engine interface put properties panel in the far right, then when we need to bind operations need to drag and drop objects from the left panel to the right panel, actually this affecting the efficiency of the operation distance is very long, So most developers actually prefer the classic layout, like the one below, where the properties pane is drag-and-drop to the left alongside the hierarchy manager so that it is relatively efficient to bind variables and resources

Be familiar with common shortcut keys

CocosCreator’s shortcut support is weak, but there are a few shortcuts that allow you to quickly switch between the four high frequency tools

  • WThe move tool
  • ERotating tool
  • RThe zoom tool
  • TRectangle transform tool

And is used 3 D model of all know, adjust the camera Angle and position in 3 D mode of operation is relatively difficult, before the project and implementation had a 2.5 D scene, so here also share two shortcuts, an object is to adjust, click on the screen, in the top left corner will appear wasd view (top and bottom or so), The four keys wasD on the keyboard can be used to fine-tune the direction, which is relatively convenient

control+shift+f

UI development

And on the web development is different, the cocos UI is not writing style, all of the elements on the interface is piling up with pictures, this transition very interesting for me, remove the style writing can save us some time to layout, I in the process of development projects also found some good practices

Accurate restoration of the design tips

Because we use drag and drop to position images in visual editors, we don’t write style files. But when I was in the first project thinking and haven’t converted, or used to web side that kind of development mode, every time I layout will go through the design draft, examine the position of the object, and then input the correct position information in the properties panel, it is no problem, of course, but the efficiency is too low, It was only after I saw the development process of one of my predecessors that I suddenly understood and corrected myself. He did this, in the design draft there cut a full figure interface, and then regard it as an underlying node, this way we will have a design draft and the same background, we layout again put small objects in the correct position, it done you just need to put that at the bottom of the node to delete, The efficiency of this layout is a qualitative leap forward.

Break down the UI into modules

A scene in the project, we the inside of the content may be a lot of, for example, I this scenario there are N a popup window, if we put all the content of the popup window according to their true location to canvas node, it is really a bad thing, because each object will overlap, later it will be difficult for us to select the operation. So when we do UI management, we need a trick is to break up the UI by module, and shift management, as shown in the following figure

(0, 0) 

let widget= this.mapDlg.getComponent(cc.Widget);
widget.right = 0;
widget.left = 0;
widget.updateAlignment();
Copy the code

Take advantage of custom controls

The custom control library adds an entry point to the common PreFab. You can drag and drop preFab into the hierarchy manager, but it’s still a matter of efficiency. When you have a lot of PreFab, it’s hard to find the controls you need when you open the preFab folder, not to mention the folder in Explorer. Custom controls not only give preFab an extra entry, but they also give PreFab an icon and a control name. This is really necessary for the use of high frequency reuse controls. Just open the panel and you can find the control you need and drag and drop it directly

Code development

Configuration Vscode

Although it is written in this document, I thought I was familiar with vscode because I transferred from writing web terminal to making games, and I was eager to get started because of the project, so I selectively ignored this part and only used the workflow of code prompt. When I saw the daily operation of the seniors in the community, It turns out that the workflow configured with vscode is actually a great productivity tool, which consists of four pieces

  • Code intelligence hints
  • Set the file search scope
  • Manually triggered compilation
  • Debug in the compiler with the Chrome Debug plugin

I won’t mention code hints and file searches. Under normal circumstances, we have modified the code, and the real-time hot update of the project can only be triggered when we return to the cocos interface. However, we have configured the compiled task on vscode and set the shortcut key to start the task. The shortcut key I set is CMD +r, so we can trigger the hot update of the project on vscode. It allows us to focus on the code as we write it; For details, see the document

// .vscode/tasks.json
// Configure the VScode task
{
    "version": "2.0.0"."tasks": [{"label": "compile"."command": "curl"."args": ["http://localhost:7456/update-db"]."type":"shell"."isBackground": true."group": "build"."presentation": {
                "reveal": "always"}}]}Copy the code
// User/keybindings.json
// Configure the task startup shortcut key[{"key": "cmd+r"."command": "workbench.action.tasks.runTask"."args": "compile"}]Copy the code

1.9.0

Parameter binding

When dealing with complex interfaces, because there are so many elements on the page, even if we try to split the script as much as possible, the number of variables that need to be bound in a script will inevitably increase, and then the code will have a long string of @property declared variables, so beginners need to take full advantage of the types. For example, if I have 10 nodes that are purely show and hide, I can bind them by declaring an array of node nodes. This way, I can declare fewer variables explicitly in the code 👇

@property([cc.SpriteFrame])
btnStatus: cc.SpriteFrame[] = [];

// Switch different states
this.node.getComponent(cc.Sprite).spriteFrame = this.btnStatus[0];
this.node.getComponent(cc.Sprite).spriteFrame = this.btnStatus[1];
this.node.getComponent(cc.Sprite).spriteFrame = this.btnStatus[2];
Copy the code

Of course, this is not a best practice, because the next person who reads our code will not be able to see which spriteFrame corresponds to the different subscripts of the array and will have to look at the bound resources through the interface. So best practices should be the atlas is generated from the state of an object different pictures, the inside of the atlas of each image can be precisely naming, when need to switch state, we can accurately get the name of the corresponding spriteFrame, although this way more than we need to maintain a gallery, but it is a relatively standard practices

@property(cc.SpriteAtlas)
spacemanAtlas: cc.SpriteAtlas = null;

// Switch different states
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("take_off_state");
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("ready_state");
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("rest_state");
this.body.getComponent(cc.Sprite).spriteFrame = this.spacemanAtlas.getSpriteFrame("fire_state");

Copy the code

Third-party tools

The third party tools I use are the following

Use Texture Packer to generate the atlas

Although the engine provides automatic graph combination function in the packaging stage, it is necessary to consciously do atlas management in the development stage in order to facilitate the maintenance of resources, the management of code variables and the drawcall optimization processing, which is very important for performance optimization.

ShoeBox

The most powerful PHOTOSHOP plugin I use so far is split gallery, GIF disassemble, generate bitmap fonts and compose GIF images. It can also compose galleries, but I find Texture Packer to be more maintenable in this area. Split atlas, GIF figure apart the two function mainly I used to get some game of public resources, the most simple animation like some gold COINS, I need it the sequence of frames, if the designer there it is good to have readily available, if not deliberately let people to do a also have no great need, my love to the net more often some CC0 copyright resources to use. For example, if I need an image from a composite image, I will use ShoeBox to split the composite image

Sketch

Before our design tool, and when I do web side development designer’s delivery is derived through the sketch page or by the blue lake, but do the game after the project, I found the development side to draft adjustment very much, when a manuscript has been basically after delivery to come over, we have a small adjustments to yourself, Also there is no need to bother somebody else, so like cut figure, decoloration, through transformation tools reduce scratchable latex picture spare area and so on some basic and high frequency operation can not trouble yourself, stylist at the same time there are also some special interactive animation needs to cut the figure to have certain split processing, if you can get also can save the cost of communication and delivery

The word spider

This actually with a relatively low frequency, or return to the game’s font needs, if I want to use the font on the interface comparison conforms to the style of whole UI, I’d like a round body, for example, but the user of the system font by default is that leptin, UI look is certainly bad experience, stylist colleagues could not give every word to make a figure, Chinese font library circle at least a few M above, we can’t all introduced as resources, so we need to do, the cutting of font library used to our game which is used to extract only those words, font library are only a few k after cutting, then you can meet our production environment, can go to see the specific usage. Since you need to start the service every time, I have bothered to make a small tool (Mac download, Window download) a long time ago, based on it to do a demonstration

conclusion

Above is the entire content of this article, mainly from my new start after the game development, some hindsight after learning can improve the work efficiency of workflow and form a complete set of small tools, because it is in the company to do the first crab, haven’t the precipitation within the team, and those little experience or in a document was I ignore, I will try to make some summaries later to settle down, and I will update here if I find other workflows that can improve efficiency. In addition to the abovemonth of the novice on the road, there are also some pits and solutions encountered in the real project, which I also find interesting. I will try to make a series of summaries to settle down in the future, so that we can meet each other