Game development has the very big difference and we usually front-end development, although is run in the browser, but in the process of development also have some exclusive term, in particular, every frame oneself give oneself create many exclusive noun, so in order to let us behind the development in the process of understanding and communication is smooth, I’ll give you simply said some of the nouns, There may be some of my understanding mistakes, if you think there is a problem must be loudly pointed out to me, thank you!!

Just to be clear: the term in question is from Cocos Creator, which may be different from other frameworks.

Let’s start with the three most critical concepts: scenarios, nodes, and components.

The relationship is as follows: Add nodes to a scenario, add components to a node, and choose Scenario > Node > Component.

scenario

The scene is a very important concept in the game, you must have the scene before you can put nodes in the scene, otherwise there will be no place to put nodes. If you want to make an HTML page, you have to have an.html file in order to add HTML tags to it.

A game can have multiple scenes, such as: loading scene, login scene, select the game type scene, select the hero scene, start the game scene…… If viewed as a web page is: login interface, module selection page, management interface, add, delete, change and check interface…… And scenes, like web pages, can also jump and switch between different scenes. There are two ways to switch scenes in Cocos Creator:

Cc.director. LoadScene (" scene name "); Cc.director. RunScene (" scene name "); // Run the sceneCopy the code

In Cocos Creator, the scene is a.fire file.

node

In Cocos Creator, the game is made up of nodes. Animation also operates on various attributes of nodes: x, Y, scale, Angle… So nodes are everywhere in Cocos Creator and are very important. You can think of nodes as tags in HTML. HTML files are stacked with tags, and Cocos Creator is stacked with nodes.

In Cocos Creator, there are many different types of nodes:

Blank nodes

An empty node has no special content and can be used as a parent to which any component can be added. Similar to div tags in HTML.

Rendering node

Render nodes are mainly used to display resources: images, text, maps… Img, P, map…

Sprite (elf)

Sprite is used to display pictures, jpeg, PNG, webP… It just doesn’t support GIfs, which is pretty lame.

Sprite (monochromatic)

Sprite is primarily used to display a single color and can be used as a mask layer or color block.

The Label (text)

Label is used to display text. You can control text size, line feed, auto intercept, line height…

RichText

RichText can style text with the BBCode tag. Currently supported styles are: color, font size, outline, bold, italic, underline, line feed, img, and Click events, and different BBCode tags support nesting.

ParticleSystem (particles)

ParticleSystem(particle) is used to read particle resource data and perform a series of operations on it, such as playing, pausing, and destroying. Particles are described below.

TiledMap (map)

TiledMap is used to display maps in TMX format in the game.

TiledTile(map block)

The TiledTile component can operate on a single map block.

The UI node

UI nodes are mainly layout nodes, function-specific UI components…

Layout (Layout)

Layout is a container node. The container can enable the automatic Layout function and automatically arrange all sub-objects according to the specifications. It is convenient for users to make lists and turn pages.

The Button (Button)

Button(Button) can respond to the user’s click operation, when the user clicks on the Button, the Button itself will have a state change. In addition, Button allows users to respond to a custom behavior after clicking. You can use the Click event.

Canvas (Canvas)

The actual resolution of the device screen can be obtained at any time and all render elements in the scene can be scaled appropriately. There can only be one Canvas in the scene at a time. It is recommended that all UI and renderable elements be set as child nodes of the Canvas.

ScrollView

ScrollView is a scrollable container that provides a way to browse more content in a limited display area. If you have something that needs a scroll bar, you can put it in there.

Sliders

Slider is a Slider component.

PageView

PageView is a PageView container. Can achieve paging or slide effects…

ProgressBar

Progressbars are often used to show the progress of an action in a game.

Toggle(check button)

Toggle is a CheckBox that changes to Radio when used with ToggleContainer.

ToggleContainer(Radio button)

ToggleContainer is not a visible UI component; it can be used to modify the behavior of a set of Toggle components. When a set of Toggles belong to the same ToggleContainer, only one Toggle can be selected at any time.

ToggleGroup(old radio buttons)
EditBox(Input box)

The EditBox is a text input component that allows you to easily retrieve text entered by the user.

VideoPlayer

VideoPlayer is a VideoPlayer component that allows you to play local and remote videos.

WebView

A WebView is a component that displays web pages and allows you to integrate a small browser into your game. Because different platforms have different authorization, API and control methods for WebView components, unified standards have not been formed, so only Web, iOS and Android platforms are supported at present.

3D

I’m not going to talk about it because I’m using it a little bit less

  • A 3 d node
    • 3D Stage
    • 3D Particle
    • Box(rectangular)
    • Capsule (Capsule),
    • They are cones.
    • Cylinder
    • Plane (the platform)
    • Quad(Square sheet)
    • Sphere (ball)
    • Torus

The camera

The camera is like our eyes. It sees wherever it goes. If it comes across a big map, we can move the camera to look at the map.

The 2 d camera

Look at the x and y axes

3 d camera

Look at the X, y, and Z axes

The light

Mainly used in 3D games to deal with lighting issues.

  • The light
    • Directional
    • Spot
    • Point
    • Ambient

component

So we talked about nodes, and the role of components is to give nodes special capabilities.

For example, if you want to add a picture to the node, you need to add a Sprite component to the node. If you want to add text to the node, you need to add a Label component to the node.

The Sprite node and the Label node are in the upper node, and the Sprite component and the Label component are in the component.

In fact, the above Sprite node is already added to the node Sprite components, can be considered as a wrapped node for us to use, we do not need to add components.

And we can add N components to a node. Note, however, that there can only be one component of the same type in the node. For example, if you bind a Sprite component, you cannot bind a Label component because they are both renderers, and the same UI component cannot be bound at the same time.

summary

Read the above content you should be able to understand some basic knowledge:

  • The scene is the largest, followed by nodes and components.
  • The game can use multiple scenes, scenes can switch between;
  • Scenarios can have multiple nodes;
  • There can be multiple components in a node;
  • Components of the same type cannot be bound to a node.

Let’s start with nouns in games

The elves

Sprites are found in many game frameworks and are basically game-specific nouns that are used to display graphics.

atlas

An Atlas, also known as a Sprite Sheet, is a common art resource in game development. An Atlas is a collection of images combined into one large image using specialized tools. Similar to CSS Sprite.

Different game frameworks use different atlas file formats:

  • Cocos CreatorInside atlas file format is.plist;
  • PhaserYou can use it inside.png 和 .json;
  • It’s used in egrets.png 和 .json;

Different frameworks may have different atlas formats and json data structures, so we use different atlases for different frameworks, and the atlases of frames are not compatible with each other.

Each framework has its own atlas generation tool, and we can use generic tools such as TexturePacker to help us with atlas generation

SpriteFrame

All animations are composed of one picture after another, and then switch these pictures according to a certain frequency to achieve the effect of animation. The game is the same, characters’ running and attacking are switched from different pictures.

In the game, each frame is stored in the atlas, and then the corresponding frame is retrieved from the atlas according to the animation needs. In Cocos Creator, each frame is stored in the SpriteFrame, which means that you get the frame and put it into the SpriteFrame.

Prefab

One resource in Cocos Creator is Prefab, which is a pre-configured game object. It puts the created nodes into resource management. Think of it as a reusable HTML structure that we write.

Prefab is created by dragging nodes from the hierarchy manager to the resource manager below to become Prefab.

Prefab can be updated manually or automatically.

If you update manually, you need to update each node in the corresponding Prefab.

Prefab updates automatically if you update the node.

However, if you delete the Prefab node, you need to double-click Prefab to change it. If you need to add an existing node, you can add the associated node from the node in the menu bar to the Prefab, and place the existing node into the Prefab.

Prefab is generally used for dynamically generating nodes, such as dynamic lists, dynamic image lists…

The particle

Particles are used in all games and are commonly used in situations such as flames, comet tails, attack effects… It is very performance demanding, and we typically create it by dragging the particle’s.plist File into the ParticleSystem’s File field.

Finally, let’s talk about the various systems in the game:

Animation system

There is a great animation system in Cocos Creator. And it’s a visual interface where we can animate the nodes.

Set the keyframe, then set the properties that need to move, set several keyframes, you can see the node moving.

Multiple property changes can be set in the property list.

We can also add events to the animation, that is, execute events wherever we move.

The collision system

We can add collision components to a node. There are three types of collision components, one is rectangular collision, one is circular collision, and one is custom collision region.

Rectangular collision means that collision callbacks are generated based on rectangular shapes

Circular collision is to take the center of the node as the prototype, and then set the radius of the circle to set the collision area.

To customize the collision region is to define the shape and region of the collision.

The Group needs to be set for the collision, and there are three callbacks after the collision: OnCollisionEnter is called when the collision occurs, onCollisionStay is called after each calculation of the collision result, and onCollisionExit is called when the collision ends.

Before using collision detection, you need to enable collision detection:

var manager = cc.director.getCollisionManager();
manager.enabled = true;
manager.enabledDebugDraw = true;
Copy the code

Physical system.

The most important thing in the game is the physical system, because with the physical system in the game can simulate the real world environment, such as: gravitational acceleration, horizontal acceleration, physical collision…

If you need to turn on the physical system, you need to add a rigid body to the node to use the physical configuration. Because the rigid body is the basic object that makes up the physical world in Cocos Creator, you can think of the rigid body as an object with attributes that you cannot see (draw) or touch (collide).

In a physical system, there is a set of physical collision components, which inherit from the collision components, so the methods of editing and setting the physical collision components are basically the same as editing the collision components.

In the physical collision component, there are also collision callbacks:

// onBeginContact is called only once when two colliders are in contact: Function (contact, selfCollider, otherCollider) {}, selfCollider is called only once when two colliders end contact: Function (contact, selfCollider, otherCollider) {}, // onPreSolve is called every time the collider contact logic is handled: Function (contact, selfCollider, otherCollider) {}, // onPostSolve: function (contact, selfCollider, otherCollider) { }Copy the code

conclusion

Well, basically some of the basic concepts in the game are introduced, if you are not clear you can give me a message, I must know all words are endless, if I write a question, please also give me a message, I will change in time.