Cocos Creator is a combination of the words Cocos + Creator, which means to help us create products based on Cocos engine.
Cocos Creator provides a set of content creation centered WYSIWYG editing tools with an All in One one-stop service system. In the whole process of game product development, the game creation team can be in it completely, through the workflow established by the game resource management, scene design, interface layout, Sprite creation, logic control, packaging operation and release to do a full range of control.
It integrates the underlying functions of the cross-platform game engine into the core, exposing the development team to only the editing content closest to the game itself, such as game object hierarchy management, scene editing, resource management, object attribute editing, and script logic drivers. This allows developers to focus on the game logic itself, making development smoother and clearer. The technical architecture of Cocos Creator is shown in the figure below:
Technical architecture diagram
Different from the previous development methods of Cocos products, Cocos Creator, on the basis of CoCOS2D-X, realizes the characteristics of thorough scripting, componentalization and data-driven, which greatly improves the work efficiency of Cocos developers and realizes the working mode centered on content creation.
scripting
Early Cocos programmers mostly developed their games in C++. Although C++ is powerful, it has high requirements on the ability of programmers, and the hard-written code is difficult to flexibly change, and the program logic function is not easy to update.
Cocos Creator uses JavaScript as a scripting language, which reduces the development difficulty and development cost, and also facilitates the operation and debugging, easily covering product development in the FIELD of H5.
componentization
Cocos Creator is based on the componentized design, and the functional modules are easy to expand. In this mode, developers are no longer confined to the container of the editor itself, and can expand the editor as needed by plug-ins. They can easily expand the editor functions by using common front-end technologies such as HTML + JavaScript and customize personalized workflow, which greatly improves the expandable space of Cocos Creator.
Data driven
The official document specifically notes the “data-driven” feature, but doesn’t seem to define it clearly. Based on my experience to understand “data driven”, “data driven” similar to “business drivers”, is the designer: art, 3 d, video, animation, import, engineering, and developers do not need to care these resources, just concentrate on business, logical script, good packaging components.
You will find that developing the game is actually much easier than developing the H5 project, as long as we write the business logic (corresponding to the front-end JS script development), even the scene has been imported into the project for us (this step is equivalent to the front-end page building. HTML, CSS section. . Nevertheless ideal is very plump, reality is very skinny feeling, general stylist is not to understand these, so these things still need us to be able to go.
Work flow chart
Particularly recommended
(12 game platforms with one click, ios, Android native and H5)
Starting with V2.4.2, Cocos Creator support is released to bytedance mini-games.
Starting from V2.4.1, Cocos Creator supports publishing to HUAWEI AppGallery Connect and Lian Shang mini games.
Since V2.3.4, Cocos Creator has added support for Tencent cloud services.
Since v2.3.0, Cocos Creator has added support for 3D physics and collision system, 3D particles, and the material system has also been upgraded to the official version.
Starting from V2.3.0, Cocos Creator supports publishing to Qutoutiao mini games. Spine Replacement Guide. DragonBones Makeover Guide.
Starting with V2.1.4, Cocos Creator support is released to Alipay mini games.
Starting with V2.1, Cocos Creator introduced 3D support. See 3D Nodes for details.
Starting from V2.0.10, Cocos Creator supports release to Mi Fast Games and Cocos Play.
Starting from V2.0.9, Cocos Creator supports publishing to Baidu mini games.
Starting with V2.0.7, Cocos Creator support is released to Huawei Fast Games.
As of V2.0.5, CocosCreator supports publishing to OPPO mini-games and Vivo mini-games.
As of v2.0.4, Cocos Creator supports publishing to GooglePlay Instant.
1. Go to the homepage of the official website to download the corresponding version or the latest version of cocosCreator editor, www.cocos.com/creator/
Note: If you can’t open cocoscreator. app, right click on the DMG or app file in Finder and select Open, then click Open again in the pop-up dialog box. Then please go to system preferences -> Security & Privacy, click still open, so that you can start normally later.
Go to the MAC launcher and find the cocosCreator icon and click open. Then register or log in to the panel.
3. Interface Overview -Dashboard
The Dashboard for Cocos Creator, shown above, includes the following tabs:
Recently opened items: Lists recently opened items. The first time you run Cocos Creator, this list is empty and will prompt you for a new item button. New Project: Select this TAB to take you to the Cocos Creator guide for creating a new project. Open other projects: If your project is not in the recently opened list, you can also click this button to browse and select the project you want to open. Tutorial: Help Information, a static page containing various beginner guidance information and documentation. Highlight the new project
On the New Project page, we first need to select a project template. The project template will include a variety of game basics for different types, as well as sample resources and scripts to help you get into creative work faster.
If you want to quickly see what cocosCreator can do, you can create a new project. There are nearly 100 examples to show you how cocosCreator works. Click on the sample collection to create a local project. The folder address is displayed at the bottom of the dashBoard and can be replaced by yourself. Click New to enter
The resource is being loaded. appear
The project is loaded successfully. Clicking the ▶️ button at the top of the middle of the panel will launch the project in your browser, as shown below
The first demo is an image Sprite,
There are all kinds of demos, and you can do most of the things you can do in H5. You can even embed a WebView in cocosCreator.
Tutorials provide access to the cocosCreator user manual and other help documents.
With Dashboard, we can create a Hello World project as a starting point. The project after creation has a specific folder structure, which we will be familiar with in this section.
Assets are used to store all local resources, scripts, and third-party library files in the game. Only contents in Assets can be displayed in Explorer. After each file in assets is imported into the project, a.meta file with the same name is generated to store the corresponding resource configuration and index information. . Meta files must be submitted to the version control system. For details, see Resource Management Notes – Meta files.
Some engineering or design raw files generated by third-party tools, such as.tps files for TexturePacker or.psd files for Photoshop, can be managed outside of assets.
Library is generated by importing assets from assets, where the structure of the file and the format of the resources are processed into the form needed for the final game release.
When the Library is lost or damaged, simply delete the entire Library folder and open the project to regenerate the library.
The local folder contains the configuration information of the local machine of the project, including the editor panel layout, window size, location and other information. Developers don’t need to care about this.
The Packages folder is used to hold custom extension plug-ins for this project. To manually install extensions, you can create this folder. To uninstall an extension, delete the corresponding folder in Packages.
The Settings store project-related Settings, such as package name, scenario, and platform selection in the Build release menu.
Temporary folder (temp) Temp is a temporary folder used to cache some temporary Cocos Creator files locally. This folder can be manually deleted after Cocos Creator is turned off, and developers do not need to care about its contents.
Json project. Json file and assets folder are used to verify the validity of Cocos Creator project. Only folders containing these two contents can be opened as Cocos Creator project. Developers don’t need to care about what’s in there.
Use project from the main menu -> Build Release… After a project is published using the default release path, the editor creates a build directory under the project path and holds all the build projects for the target platform.
Version control Cocos Creator automatically generates a.gitignore file when creating a project to exclude files that should not be committed to a Git repository. If the developer is using another version control system, or needs to commit the project elsewhere, it should be noted that only assets, Packages, Settings, project.json, or any other manually added associated files need to be submitted.
Editor recommendation: the official recommended editor is also Microsoft’s vscode. It happens that most of the front-end students in our company also use vscode, so the editor will not be introduced here. Another important point is that after modifying the project script using the external text editor, the Cocos Creator window should be reactivated to trigger the script compilation.
Attach: vscode cocosCreator editor development environment configuration editor: docs.cocos.com/creator/man…
Iv. Editor basics
1. Resource Manager The resource manager is the work area we use to access and manage project resources. Adding resources to this is usually a necessary step when starting a game. You can create a new project using the HelloWorld template and see that some basic resource types are included in the resource manager.
The resource manager displays the contents of the project assets folder in a tree structure. Note that only the assets stored in the assets directory of the project folder are displayed in this tree structure. See the project Structure section for a description of the project folder structure. Here are the interface elements:
- The + button in the upper left corner is the create button to create a new resource.
- The text entry box on the upper right can be used to search for resources whose filenames contain specific text.
- The search button in the upper right selects the type of resource to search for.
- The main body of the panel is a list of resources in the resource folder. You can add, delete, and modify resources by right-clicking the menu or dragging and dropping.
- The small triangle in front of the folder toggles the expansion/collapse state of the folder. When the user holds down Alt/Option and clicks the button, the folder itself is expanded/collapsed, and all the child nodes in the folder are expanded/collapsed simultaneously.
The resource list
Any folder structure can be included in the resource list. The folder is displayed as an icon in Explorer. Click the arrow to the left of the icon to expand/collapse the contents of the folder.
The list displays resource files except for folders. The file in the resource list hides the extension and uses ICONS to indicate the type of file or resource. For example, the HelloWorld template creates a project that contains three core resources:
Image resources: Currently include JPG, PNG and other image files. ICONS are displayed as thumbnails of images. Script resource: A JavaScript script file written by a programmer with a JS file extension. We edit these scripts to add component features and game logic. Scene resources: Double-click the scene file that can be opened. Only after opening the scene file can we continue content creation and production. For more common resource types and resource workflows, see the Resource Workflow chapter.
Create a resource
The following types of resources can be created in Resource Manager:
- folder
- The script file
- scenario
- The animation clips
- Automatic atlas configuration
- Art digital configuration
Clicking the Create button in the upper left corner brings up the Create Resource menu that includes the list of resources mentioned above. Clicking on an item creates a new resource at the currently selected location.
Select the resource
You can use the following resource selection operations in the resource list:
- Click to select an individual resource
- Hold down Ctrl or Cmd to add more resources to the selection
- To select multiple resources in a row, hold down Shift and click
You can move or delete a selected resource.
The mobile resources
After selecting a resource (multiple options are available), hold down and drag the mouse to move the resource to another location. When you drag a resource onto a folder, you see the folder that you hover over highlighted in orange. Releasing the mouse at this point will move the resource to the highlighted folder.
Delete the resource
You can perform the following operations to delete selected resources:
Right-click the resource and choose Delete from the pop-up menu. After selecting the resource, press Delete (Windows) or Cmd + Backspace (Mac). Deleting the resource is an irrevocable operation, so a dialog box will be displayed asking the user to confirm. The resource is deleted and cannot be retrieved from the recycle bin (Windows) or wastebasket (Mac)! Use it with caution and do a good job of version management or manual backup.
Other operating
The right-click menu in Explorer also includes the following actions:
Create: Similar to the create button, the system adds resources to the currently selected folder. If a resource file is currently selected, the system adds the new resources to the folder where the selected resource resides. Copy/paste: Copy and paste the selected resource into this folder or another folder. Rename: Renames resources. Find resources: Find files that use this resource and filter them in the search box. Display in Explorer (Windows) or Finder (Mac) : Opens the folder where the resource is located in the operating system’s file manager window. Open a resource in Library: Open the data generated after the selected resource is imported by Creator. Go to the resource location in the Library: Open the Library of the project folder to import the resource location. See the project Structure section for details. Display resource UUID and path: Displays the UUID of the currently selected resource in the console window. In addition, for a specific resource type, double-click the resource to enter the editing state of the resource, such as scene resource and script resource.
Filtering resources
Enter text in the search box on the upper right of Explorer to filter out all resources whose file names include the input text. You can also enter a file extension like *.png to list all resources with that particular extension.
Scene editor
The scene editor is the core work area for content creation, and you’ll use it to select and place scene images, characters, special effects, UI, and other game elements. In this workspace, you can select and modify the node’s position, rotation, scale, size and other properties through the Transform tool, and get a wySIWYG preview of the scene.
The view is introduced
Navigation You can move and position the view of the scene editor by:
Right-click and drag: Pan view. Mouse wheel: Zooms in and out from the current mouse hover position. The background of the scene view displays a set of rulers and grids that represent the location information of points in the world coordinate system. The point reading (0,0) is the origin of the world coordinate system in the scene. When zooming out the view using the mouse wheel, each scale represents a distance of 100 pixels. Depending on the scale of the current view, a number representing the distance from the point to the origin will be displayed on different scales, all in pixels.
The ruler and grid in the scene are important reference information for the position of scene elements. For the relationship between coordinate system and position and other node attributes, please read the section coordinate system and Transformation.
The purple wire box in the Design Resolution Indicator box view represents the content area that will be displayed by default in the scene. The size of this area is determined by the design resolution. See the Canvas Component Reference section for Settings and effects for design resolutions.
Select node when the mouse hover over the node in the scene, the constraint box of the node will be displayed as a gray single line. Click the mouse at this point, the node will be selected, the selected node will be surrounded by a blue wire box to indicate the constraint box of the node. Selecting a node is a prerequisite for using the Transform tool to set the node position, rotation, scale, and so on.
If you want to quickly focus nodes in the scene editor, there are two ways:
Double-click the node in the hierarchy manager. Select the node in the Hierarchy Manager, then press the F shortcut key.
Constraint box for a node
The constraint box (gray or blue wire box) can be seen when the node is hovering or selected. The rectangular area of the constraint box represents the size of the node’s size attribute. The node can be set to size even if it does not contain an image rendering component (such as Sprite), and any transparent area within the node constraint box can be hovered over and selected with a single click.
The size attribute of a node plays an important role in multi-resolution fit and typesetting strategies. Read multi-resolution fit and Element Alignment for more information on the use of node size.
Node Name Hint
When the mouse hover over the node, the node name will be displayed together with the node constraint box. When the node is relatively dense, you can first determine the target to be selected according to the suspension prompt, and then click to confirm your selection.
For node naming, read the introduction to the Hierarchy Manager.
Multiple nodes
Hold down and drag the left mouse button in the scene editor to draw a marquee box covered in blue. Nodes that partially overlap with the marquee box will be selected together when the mouse button is released. You can change the area of the marquee by sliding the mouse at will before releasing the mouse key.
After multiple nodes are selected, any transformation operations performed will apply to all selected nodes simultaneously.
The core function of the scene editor is to edit and lay out the visible elements of the scene in a WYSIWYG manner. We used a series of transform tools in the upper left corner of the main window toolbar to arrange the nodes in the scene the way we wanted. Hover the mouse over the transform tool to display the relevant information.
Move transform tool
The Move Transform Tool is the transform tool that is activated by default when the editor is opened, and can then be activated by clicking the first button on the toolbar in the upper left corner of the main window, or by pressing the shortcut key W while using the Scene Editor.
If you select any node, you will see a movement control handle (Gizmo) with two red and green arrows and a blue square on the center of the node (or the location of the anchor).
A control handle is a controller in the scene editor that can be interacted with with the mouse in a specific editing state. These controllers are for editing purposes only and will not be displayed while the game is running.
- Hold down the red arrow and drag the mouse to move the node in the X-axis direction;
- Hold down the green arrow and drag the mouse to move the node in the Y-axis direction;
- Hold down the blue square and drag the mouse to freely move nodes in both axes at the same time.
Rotation transform tool
To activate the Rotation Transform tool, click the second button on the toolbar in the upper left corner of the main window, or press the E shortcut while using the Scene editor.
The handle of the tool is composed of an arrow and a ring. The direction of the arrow indicates the Angle of the current node’s rotation property. Drag any point inside the arrow or ring to rotate the node. Before releasing the mouse, you can see the Angle value of the current rotation property on the control handle.
You can also change the Rotation value in the property inspector on the right to achieve the exact Rotation Angle.
Scaling tool
To activate the scale transform tool, click the third button on the toolbar in the upper left corner of the main window, or press the R shortcut while using the Scene editor.
-
- Hold down the red square and drag the mouse to scale the node image in the X-axis direction;
-
- Hold down the green block and drag the mouse to scale the node image in the Y-axis direction;
-
- Hold down the yellow square in the middle to scale the node image as a whole while maintaining the aspect ratio.
When a node is scaled, all child nodes are scaled.
Rectangle transform tool
To activate the Rectangle Transform tool, click the fourth button on the toolbar in the upper left corner of the main window, or press the T shortcut while using the Scene Editor. The rectangle Transform tool’s control handle consists of a square with four blue vertices and a blue ring.
Drag any vertex of the handle to change the position and size properties of the node while keeping the position of the diagonal vertex unchanged.
Drag any border of the control handle square to change the width or height property in the node size while keeping the position of the opposite side unchanged.
Drag the blue dot of the control handle to modify the Anchor point of the node while keeping the position of the box unchanged.
In the layout of UI elements, it is often necessary to use the rectangle Transform tool to directly control the position and length of the four edges of a node. For image elements that must maintain the aspect ratio of the original image, the rectangle Transform tool is usually not used to resize them.
Hierarchy manager Node Tree
The hierarchy manager includes all nodes in the currently open scene, regardless of whether the node contains visible images. You can select, create, and delete nodes here, as well as create parent-child relationships by dragging and dropping one node onto another.
Click to select the node. The selected node is highlighted with a blue background. The currently selected node displays a blue border in the scene editor and updates the content in the property inspector.
Create a node
There are two ways to create nodes in the hierarchy manager:
- Click the + button in the upper left corner, or right-click the mouse and enter the Create Node submenu in the right-click menu. In this submenu, you can select different node types, including Sprite, Label, Button, etc., with different functions and presentation nodes.
- Drag and drop resources such as images, fonts, or particles from the explorer into the hierarchy manager. You can create the corresponding image rendering node with the selected resource.
Remove nodes
After a node is selected, you can Delete the selected node by right-clicking the Delete option in the menu, or press Delete (Windows) or Cmd + Backspace. If the selected node includes child nodes, the child nodes are removed as well.
Establish and edit node hierarchies
Dragging node A onto node B makes node A A child of node B. Like the resource manager, the hierarchy of nodes is represented in a tree view. Click the triangle icon to the left of the node to expand or unroll the list of child nodes.
Change the display order of nodes
In addition to dragging a node to another node, you can continue dragging the node up and down to change the order of the node in the list. The orange box indicates the range of parent nodes that the node belongs to, and the green line indicates where the node will be inserted.
The order of the nodes in the list determines the order in which the nodes are displayed in the scene. The rendering order of the nodes shown below in the hierarchy manager is after the upper nodes, that is, the lower nodes are drawn after the upper nodes, so the lowermost nodes are shown first in the scene editor.
Other operating
Right-click on the node to pop up the menu also includes the following operations:
- Copy/Paste: Copy the node to the clipboard, then you can paste it to another location, or open another scene to paste the node you just copied.
- Copy node: Generates a copy of the node exactly the same as the selected node, and the generated node and the selected node are in the same hierarchy.
- Rename: Rename a node.
- Show node UUID and path: In complex scenarios, we sometimes need to get the full hierarchical path of a node to access it while the script is running. Click this option to see the path of the currently selected node and its UUID in the console.
- Lock node: Move the mouse pointer over the node and a lock button will appear on the left. After the node is locked, the node cannot be selected in the scene editor.
Properties Inspector
The property inspector is the work area where we view and edit the currently selected node, node components, and resources. Selecting nodes in the scene editor, hierarchy manager, or resources in Resource Manager displays their properties in the property inspector, which can be queried and edited.
Node name and activation switch
The check box in the upper left corner represents the active state of the node. When the node is in the inactive state, all the components related to image rendering on the node will be closed, and the whole node including its children will be effectively hidden.
The node name displayed on the right of the node activation switch is the same as the node name displayed in the hierarchy manager.
Node properties
The property inspector then displays the Node’s properties, which are listed under the Node title. Click Node to collapse or expand the Node’s properties. There is a Node Settings button to the right of the Node title that allows you to reset Node properties or reset Node properties and all component property changes, or paste copied components.
In addition to transformation properties such as Position, Rotation, Scale and Size, the node’s properties also include Anchor, Color and Opacity. Modifying the properties of a node usually immediately changes the appearance or position of the node in the scene editor. If you need to change node properties in batches, you can select multiple nodes in the Hierarchy Manager by holding down the Shift key, and then set them in batches in the Property Inspector. The batch setting of node attributes is similar to the batch setting of resources. For details, see the Batch setting of Multiple Resources in the lower part of this document.
For more details on editing node properties, see the coordinate systems and Transformations section.
Component attributes
Under node properties, all components mounted on the node and their properties are listed. As with node properties, clicking on a component name toggles the collapse/expansion state of that component property. In cases where many components are mounted on a node, you can obtain a larger work area by collapsing component properties that are not frequently modified. To the right of the component name are buttons for help documentation and component Settings. The help button can go to the document introduction page of the component. The component Settings button can remove, reset, move up, move down, copy, and paste a component.
A component created by a user through a script whose properties are declared by the script. Different types of properties have different control looks and editing styles in the property inspector. We’ll go into more detail about how attributes are defined in the declaration of attributes section.
Edit properties
Properties are variables declared in component scripts that are exposed and can be serialized and stored in scene and animation data. Through the property inspector we can quickly modify the property Settings, to achieve the purpose of adjusting the game data and gameplay without programming.
Properties can generally be divided into value types and reference types depending on where the variable is used in memory.
Value type attribute
Value types include numbers, strings, enumerations, and other simple variable types that use little memory:
- Number: You can directly use the keyboard to enter, or you can press the up and down arrow next to the input box to gradually increase or decrease the value of the attribute.
- Vector (Vec2) : The control of a vector is a combination of two numeric inputs, and the input box will identify the name of the child property corresponding to each numeric value with x and Y.
- String: Directly input String in the text box with the keyboard. The String input control is divided into single line and multi-line. The multi-line text box can be wrapped by press Enter.
- Boolean: Edit in the form of a check box, true for a property with a checked state, false for an unchecked state.
- Enumeration (Enum) : Edit in the form of the drop-down menu. Click on the enumeration menu and select an item from the pop-up menu list to complete the modification of the enumeration value.
- Color: Click on the Color properties preview box and the Color selector window will pop up. In this window, you can directly select the desired Color with the mouse, or directly enter the specified Color in the RGBA Color input box below. Clicking anywhere outside the color picker window closes the window and uses the last selected color as the property color.
Reference type attribute
Reference types include more complex objects, such as nodes, components, or resources. Unlike the various ways in which value types can be edited, reference types usually have only one way to edit them: by dragging and dropping nodes or resources into the property bar.
Properties of a reference type show None after initialization because you cannot set an initial value for a reference type property by script. You can then drag nodes or resources of the corresponding type according to the type of the attribute to complete the reference assignment.
A white label will be displayed on the property bar where you need to drag nodes to assign values. The label may show Node, indicating that any Node can be dragged, or the label may show component names such as Sprite, Animation, etc. In this case, you need to drag the Node with the corresponding component mounted.
The property bar where you need to drag and drop a resource assignment will display a blue label that shows the type of the resource, such as Sprite-frame, Prefab, font, etc. The assignment can be done by simply dragging the appropriate type of resource from the resource manager.
Note that a script file is also a resource, so the script resource reference properties used by the component at the top of the figure are also indicated with blue labels.
You can set resources in batches
Select a resource in Explorer to display its properties in the property Inspector for querying and editing. For details about the parameters of each resource, see common resource workflow.
To batch set resource attributes of the same type, you can press Shift in Resource Manager to select multiple resources. The number of selected resources and editable resource attributes are displayed in the property Inspector. Click the Apply button in the upper right after setting.
If the following attributes are displayed in the property inspector, it indicates that the values of the attributes are inconsistent in the selected resources. You can choose whether to modify the attributes in batches as required.
- The check box is gray
- Input box displays –
- The selection box is blank
Control library
When using the default window layout, the control library is displayed in the editor by default. If the editor layout you previously used did not include the control library, you can open the control library by using the main menu panel -> Control Library and drag it to any location in the editor you wish.
Currently, the control library consists of two categories, represented by two paging bars:
Built-in controls
As shown above, there is a list of all the built-in default nodes in the editor. By dragging and dropping these controls into the scene, you can quickly generate sprites with default resources, buttons with background images and text titles, and scrollViews with content and scrollbars configured.
The control content contained in the control library is the same as the default node that can be added in the node menu in the main menu, but it is more convenient to create new nodes through the control library.
As more functions are added, the node types in the control library will be added.
Custom control
This page is a collection of user-created Prefab resources that can be created and reused multiple times.
To add a custom Prefab control, simply drag and drop the appropriate Prefab resource from Explorer to the custom control page to complete the creation.
Right-click on an element in a custom control to rename it, delete it from the control library, and replace the control icon.
You can then create your own custom controls in the scene by dragging and dropping them just as you would with built-in controls!
Console
The console displays error messages, warnings, or other log messages generated by the Cocos Creator editor and engine. Information of different importance levels will be displayed in different colors:
Preview and Build – Key features
Select preview platform – find the following icon at the top of the middle editor.
Click the Run button
Implement a Hello World
For those of you who are not familiar with typescript, we used JavaScript hello World as a project template. (Anyone who can use typescript should use TS, which saves us a lot of trouble.)
1. Create a project
From the dashboard, click Hello World and then click the orange New project button at the bottom (you can change the new address in the input box before doing so) and the following screen appears:
Then click on the Scene folder in Resource Management, and double-click HelloWorld. Click on the outermost Canvas node in the Scene list. The Canvas node is selected in the preview and the property inspector appears on the right side of the editor.
The property detector can be set foolishly, scene position, size, fit scheme, color, etc. Very convenient and simple.
Now focus on the Script inside Helloworld.
Clicking the HelloWorld script editor will automatically locate the file in resource Manager.
You can preview and edit with vscode. Modifying the contents of the Text will be hot updated in the preview.
Attach the official editor based tutorial: docs.cocos.com/creator/man…
The expansion of the HelloWorld
First we add a particle accelerator to the hierarchy manager.
See a dynamic particle in the browser
Add a script.
Copy the helloWorld.js file into the Script folder. Let me call it cocos theta. (With the coCOS node name in the hierarchy management, mainly used to control coCOS nodes)
Then select the hierarchically managed COCOS node. In the Properties inspector, click the Add Component button – in the lower right corner of the panel. Select the newly created Cocos script.
Add the Player attribute to the cocos script.
In the property inspector you will see an empty Player property in the lower right corner
Then rename New Particle to Particle in the Hierarchy manager, click on the Cocos node, and drag Particle into the property detector’s Player.
Access the player inside the onLoad inside the script.
onLoad: function() { cc.log(“The player is ” + this.player.name); },
The browser prints it, which means that the name of the player is particle.
This completes the node access.
Access child nodes.
Select the cocos node in the hierarchy manager and create the child node -bg.
You see the node with the white background. We can change the background color.
Inside the onLoad function
cc.log(this.node.getChildByName(“bg”)); // Find the child node – by name
Prints the properties of the child node bg.
Cc.find () is commonly used
Bg nodes are also printed.
Change the transformation of the node (position, rotation, scale, size)
Changing node Location
Assign values to x and y coordinates respectively:
this.node.x = 100;
this.node.y = 50; You can also assign using the setPosition method:this.node.setPosition(100.50);
this.node.setPosition(cc.v2(100.50)); Or assign by setting the position variable:this.node.position = cc.v2(100.50); The above uses are equivalent.Copy the codeChange node rotation
this.node.rotation = 90; or
this.node.setRotation(90);
Changing node scaling
this.node.scaleX = 2; this.node.scaleY = 2; or
this.node.setScale(2); this.node.setScale(2, 2); The above two methods are equivalent. When setScale passes in a single parameter, it modifies both scaleX and scaleY.
Change the node size
this.node.setContentSize(100, 100); this.node.setContentSize(cc.size(100, 100)); or
this.node.width = 100; this.node.height = 100; The above two methods are equivalent.
Change the node anchor position
this.node.anchorX = 1; this.node.anchorY = 0; or
this.node.setAnchorPoint(1, 0); Note that these changes affect the rendering components mounted on the node, such as Sprite image size, rotation, and so on.
Press down the keyboard to control the left and right movement of the COcos node
In the onLoad function add:
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
Register onKeyDown and onKeyUp events.
The browser sees the output, indicating that the keyboard’s time monitoring succeeded.
-
1 Respectively monitor the ASDW key to complete the movement control of the node.
-
Press the space bar to create a bullet effect.
The effect is shown below.
So that’s it for a simple introduction to cocos.