We have many great actions in the Cocos Creator editor that are great to know, but we don’t talk much about. We just made a video sharing 25 amazing things you can do with the editor and when you use Chrome for testing.
Was that too fast? Some might think so. So we’re sharing this additional information to help give a bit more detail on these 25 things you probably didn’t know were possible and a link to learn more in the Cocos Creator documentation when available.
Snapping Button
By clicking this snapping button, you can change the movements of an item in the editor preview area by any increments you want. Just edit the values here, click on the node, and hold the ctrl button. This will make it follow the rules you put in the snapping button. This works on both 2D and 3D nodes. This works with movement, rotation, and scaling. You can learn more here:
https://docs.cocos.com/creator/manual/en/editor/scene/?h=snapping
Preview Your Prototypes
If you have a specific user interface or placement for items on the screen built by your artists, you can add a prototype image to reference. You can move it around and change the transparency to use it as an overlay.
https://docs.cocos.com/creator/manual/en/editor/scene/?h=reference%20image
Walking around a 3D scene
If you have a 3D scene, you can look around it by holding down the right-click button on your mouse and using the WASD or QE of your keyboard to move up, down, left, right, forward, and back. Add the shift button to move faster.
https://docs.cocos.com/creator/manual/en/editor/scene/?h=3d%20view
Locking Nodes
If you built a node perfectly, you can add the lock function so nobody can edit it accidentally. This also will lock all children of the node.
https://docs.cocos.com/creator/manual/en/editor/hierarchy/?h=lock#other-operations
Advanced Searches
If you need to do a more advanced search for items, click on the magnifying glass and choose from UUID, bundle, or specific asset types.
https://docs.cocos.com/creator/manual/en/editor/assets/?h=search#searching-assets
Expand and contract the Node Tree and Assets
If your asset number is getting crazy, use this button to minimize all the items inside that folder. It also works great for the node tree to shrink items in a node.
Right-click a scene to view in Chrome
If you want a quick view of a scene, you don’t have to load it to the scene editor. Right-click and choose the “Preview Scene in the Browser,” and it’s loaded in Chrome.
Cocos Creator has a hotkeys section.
If you love hotkeys, you can find all of them in the shortcut area and edit them to your liking or reset them back to the default.
The node library
The node library can help you quickly add UI Nodes, Render Nodes, and custom codes or drag prefabs and place them there. To add your own prefabs, just drag them into the node library, and they are placed within the library.
Feature Cropping
If your game size is too big, you can disable different features your game isn’t using in the feature cropping. This could be XR, 3D, and physics.
https://docs.cocos.com/creator/manual/en/editor/project/?h=feature%20cropping#feature-cropping
Animation Curves
In animations, if you have an action that changes, like position or transparency, you can add curvature by clicking on the curve, choosing a curve preset, and then playing with its anchor points. Note : You must click on the line, not the anchor points, to make the initial curve.
https://docs.cocos.com/creator/manual/en/animation/animation-curve.html
QR Scanning
If you’re at the point where you start testing your game on a phone, you can view your game by scanning the QR code on Cocos Creator with a phone. You can then test your game just like you would on your computer. You can also send the IP address to those in your network to test on their computer. Note : The phone’s Wi-Fi and computer must be on the same network.
Cocos Creator 3.8 Manual - Preview & Debugging
Test with multiple phones
If you are testing for different phones, you can change the phone’s size while testing from the already available list. Or, you can build new ones if you don’t find the one you want in the preferences.
https://docs.cocos.com/creator/manual/en/editor/preview/?h=resolution#preview-in-editor
Console calls
If you have trouble finding your issues, you can add console calls and view them on Google Chrome or Cocos Creator’s console when testing. There are two very good one to use.
Console.log will send messages to the console of Google Chrome while console.error will send you an error message before doing the next step. console.warn also works as well.
https://docs.cocos.com/creator/manual/en/editor/console/?h=console
CPU Throttling
If you want to test your game to make sure it works with lower-end phones that can play your game, you can throttle the Chrome DevTools and, in the performance insights, throttle the slowdown to 6x. If it’s running well, your game is ready for low-end phones.
Testing Statistics
If you want to know how well your game is performing, Check the bottom left. It gives you all the details you need to know to ensure there aren’t performance issues.
https://docs.cocos.com/creator/manual/en/editor/preview/#preview-in-editor
Console Window
If you have many items you want to go through that are shared in the console log in Cocos Creator, click on this open log file button to open the log file. This will copy everything on the log; you can then add it to any text editor you want. You can also clear the log by clicking on the clear log button.
https://docs.cocos.com/creator/manual/en/editor/console/?h=console#panel-operations
Save Build Configuration
When building your game, you can save and load your configurations again using these two buttons in the build area.
UV Preview
When you look at a mesh in the preview, you can look at it as a mesh or a UV layout by switching to a UV layout. You can also get some info on the vertices and triangles.
Move Windows
If you don’t like the default setup, move the windows in your editor to whatever you want, undock them, or combine them into one window.
https://docs.cocos.com/creator/manual/en/editor/editor-layout/?h=panels
Clone Materials
If you want to build a material and don’t want to start from scratch, you can clone internal materials from our internal database of materials in the assets folder.
Shimmy Shimmy Nodes & Files
Clicking on the item you can add to the inspector area will find it in the assets folder or node tree, brighten it, and give it a little shimmy.
Pin the Inspector
If you hate that the inspector changes when you click away from it, clicking on the pin on the top right will make it so your inspector won’t move to other items.
https://docs.cocos.com/creator/manual/en/editor/inspector/?h=inspector#toolbar
Multiple Inspectors
If you want two inspectors, pin one down and open a new one, hitting Ctrl+3 or Cmd+3. The pinned one will stay with the node already chosen so that you can copy from it. Note : You can have two in different windows, but not as tabs in the same window.
Clear localstorage
If you want to clear your localstorage for testing, you can delete files in the project\temp\scene\localStorage folder. You can also edit the files in the folder if you need to do more tests.