Cocos Creator 1.0

Announcements
#1

Cocos Creator 1.0 officially released!

We are excited to release version 1.0 of Cocos Creator. Cocos Creator is a new, unified, development tool that handles every step in the game development process.

v1.0 brings:

  • A better coding environment
  • A reliable native development and publishing workflow
  • New UI elements: EditBox and Grid Layout
  • Spine skeleton animation and Tiled Map support

New UI Element: Grid Layout and EditBox

As a developer you may need to implement a user login interface, an inventory/backpack interface or some sort of table view. This major update brings home the Grid Layout and EditBox UI element. These UI elements empowers users to create any kind of UI they like.

aaad36fca8ee82ba.png320×502

A demo project highlights some new UI features.

Spine Skeleton Animation and Tiled Map

Cocos Creator now supports skeleton animation created and exported with Spine, including complete runtime API.

f83c83d8f3e12256.png1071×486

TMX (Tiled Map Editor) is also now supported. It is as simple to use as creating a
TiledMap component and draging your TMX file onto it. After the tilemap is created, each tiled layer will be created as seperate node, so you can insert your actors between those layers.

(Create a new project with Example Collection project template, and you can quickly preview and learn how to use Spine animation and tilemaps.)

New Coding Environment and JSB Debug Workflow

Cocos Creator works with Visual Studio Code now and it’s the recommended tool to code your game. Visual Studio Code is a cross-platform, lightweight IDE which has great support for JavaScript and excellent performance. Also it shares the same application framework as Cocos Creator, so we decide to use Visual Studio Code as our recommended IDE and soon to be default.

cf84c7fd94662682.png930×589

In 1.0 version, users still need to download VS Code manually and install related extension through Cocos Creator’s Developer menu. We are working on the integration of VS Code into Cocos Creator.

With our extension, you can debug your script on JSB platforms with VS Code now. Please check this guide for more information.

Extending The Editor

Starting in v1.0, developers can now create plugins to extend the Editors functionality. This means you can:

  • Develop plugins that incorporate directly into the editor.
  • Plugins can be menu items to run its functionality.
  • Communicate between Node.js process and HTML page process. One plugin can register many menu items.
  • Build your package’s interface with standard HTML.

Developers can create extensions capable of providing most of what VS Code/Atom/Sublime do. Including text processing, file system I/O and importing any third-party JavaScript package you want.

Other Highlights

  • The Timeline editor workflow has been revamped. Animation editing mode is now isolated so users will not accidentally change Node properties or Node tree structures outside of animation root node. A lot of useful shortcuts and editing operations are added as well.
  • Prefab editing mode is similar to Animation editing mode. You can double click on a prefab asset to quickly edit it in the scene view.
  • You can choose to preview your game using the Simulator or Browser from a dropdown menu next to ‘Preview’ button
  • Added coding examples to most of the common API
  • Sprite component now includes ‘Filled’ and ‘Tilled’ render mode.
  • Sprite component now supports render without trim, Sprite node size can also be set with ‘Size Mode’ property.
  • Sprite and ParticleSystem supports blend func.
  • Added component context menu to Properties panel. You can reset component properties, remove component, copy and paste component from one node to another and moves component up and down on a node.
  • Added align nodes buttons to Scene view.
  • Build panel workflow revamped. Added screen orientation, engine template, Android keystore, sourcemap setting. Also you can cancel build and compile process now.
  • Add cc.loader.loadRes API for dynamic asset loading.

Please read 1.0 release notes for more information.

More Demo Projects

The most important source of examples is the Example Collection project template. There are also many demos to show a complete game:

  • Dark Slash basic game loop demo. Special thanks to Veewo Games for authorizing us to use original ‘Dark Slash’ game resources to make this tutorial.

5e094cd93e6df20b.png1233×782

  • UI Demos including multi-resolution supporting menu interface with cool transition animations, a backpack generated by data and prefab and a Clash Royale style navigation menu showcase.
  • Blackjack demo, collaboratively developed with Tencent Games.
  • Flappy Bird clone featuring a sheep.
  • Star Catcher demo game, in user manual we have a quick start tutorial showing how to build this game step by step.

We will keep on adding more demos and complete games as well as improving the existing ones!

6 Likes
#2
#3

Nice work! But i have a question… how can update to this version of cocos creator? just override the last version?
Thanks in advance and keep going with this amazing work!

#4

Yes, that is how I did it :slight_smile:

#5

That’s WONDERFULL, thank you ‘guys’ ! :smiley:

#6

I really cannot wait to finish up my current game and dive into Cocos Creator. I’ve been waiting for a cocos2d-x tool that’s this polished for a long time :smiley:

#7

Nice. Going to create games with cc

#8

It doesn’t.
1-Does VSC has support for Creator, or normal cocos-2dx JS functions?
2-When can we expect the update that will add physics and colliders?

#9

We create VSC plugins to let it do code completions and JSB debugging.

#10

@slackmoehrle is cc.loader can be used as an alternative for AssetsManager?
if not please make a good tutorial for AssetesManager for cococs creator there is a sample hot update out there but its not that clear… i think preloading js files from original cocos2d-js is different from cocos creator right? thanks sir :smile:

#11

This is awesome! I have started making my mobile game using Creator!
Can you make a sidescroller/platformer game like the Parkour Practice Game using cc.

Thanks a lot for all your hard work :smile:

1 Like
#12

i wan to create a class with out extending cc.Component…
is it possible?

is just want a class Utils for example…
can i do this ?

//Utils.js
var Utils = cc.Class({
      properties :{
          ......
      },
      onLoad : function()
      {
         ......
       }
});
Utils.instance = new Utils();
modules.exports = Utils;

and to use it

var Utils = require('Utils');
var someValue = Utils.instance.someFunction();
#13

Eta for c++? :slight_smile:

2 Likes
#14

Wow. Amazing! Cannot imagine Cocos Creator 1.0 is release that fast and I still haven’t completely familiar with v0.7.1 yet. This update is release faster than my expectation.

Thanks guys! Some tutorials are not able to run in v0.7.1 but now all the tutorials can be run without any issue.

#15

Let us ask @pandamicro for best practice.

#16

When can we expect the update that will add physics and colliders? it’s really important and essential.

1 Like
#17

I downloaded these games. While other games are working fine but on running, UI Demos and tutorial duang sheep, it’s showing below thing:

38f2d82703591536.png2542×1354

Please guide me on the same.
Also, yes it does have code and assets in the project hierarchy.

And for opening new projects, the cocos creator is closing window and opening again!
It’s not looking good. Please look into that also.

Thanks :smile:

1 Like
#18

Maybe the project did not have default scene. You can double-click on “home” scene to open it and run the game.

#19

Aah thanks. Worked :smile:

I was actually expecting like unity where we either set the default scene or I think the first scene is taken as default scene :stuck_out_tongue:

Would be fun to learn cocos creator :smile:

Also, is the game not multi resolution?
Anyways, I’ll check code and make it, if it’s not :smiley:
EDIT :(Ignore, actually the game is made to play on portrait mode and not landscape mode which works fine drop down devices that you can see in left top of the image attached.)

924f6f049979bc5c.png2552×1354

#20

I have checked that the DesignResolutionSize of the Simulator is different to DesignResolutionSize of the scene and the browser.

For Example, I set the DesignResolutionSize = (768, 1136).
In browser I obtain getDesignResolutionSize() = 768, 1136, but in the Simulator I obtain getDesignResolutionSize() = 1704, 1136.

It is assumed that design resolution does not change. Any explanation?

Thanks :fearful:

2 Likes