The Cannon. Cocos Creator Tutorial. Playable ;)

The Cannon. Cocos Creator Tutorial. Playable ;)

I found the Cocos Creator about a week ago and decided to write a simple game to get to know the editor.

Apart from the great experience of using the Cocos Creator i got a neat playable game and a tutorial explaining the creation process.

Please, play the game, view the source code and read the tutorial if you like!

Giving velocity to an object based on rotation
Cocos creator. physics

This is great. Thank you!

1 Like
Problem with chipmunk physics

Thank you for share :smile: Maybe this not related but how did you do to upload the playable game to Github ?
I want to know how to do it.


@OscarLeif I use Github Pages


Nice tutorial. It seems that there is a physics engine that comes with Creator but not entirely integrated into it. So I have a couple of questions:
1- Would you refer me to the documentation of Chipmunk?
2- Why are you making the meteor & Bullet nodes instead of prefabs?
3- I don’t understand this:

this.bulletVerts = [
        -bw/2, -bh/2,
        -bw/2,  bh/2,
        bw/2,  bh/2,
        bw/2, -bh/2

Shouldn’t the getRect you used before be suffeient for a physics shape?

  1. It is what i did to find out how it works, i also read the source code of chipmunk ported to js (it is included in cocos creator engine repo). And it is what i would kindly advise anybody to do - read sources. :wink:

  2. For sure there is many ways to achieve same thing in Cocos Creator. Prefab is an awesome concept and i use in the tutorial too. And it is applicable here of course. But to make a Prefab you need to create Node in editor and drag it to Assets window, which confuses me a bit. What should i do if i dont need the node in the Scene but only the Prefab? Did not find an answer yet.

  3. It is rect “encoded” as chipmunk engine wants it. So it is basically [x1,y1,x2,y2,...]. So the getRect() wont work, because it returns an object not an array.

p.s.: srsly, i am not mean or something, i like to explain things and to learn from others, but the bests way to learn is to code and to read sources.


i am getting black screen when i tried to run your project in stimulator. But i can run it in Browser but with an error message on browser window that says

ERROR : Sorry can not load “particles/meteor-tail-particles.plist” because it is not placed in the “resources” folder.
ERROR : Should not add cc.Sprite to a node which size is already used by its other component.


Hi @garek,

thank you for this great tutorial.

I have a problem with it, I stuck in chapter 4 with the line:

shape.userData = node;

Where to put this, I haven’t found it in your code, and without it my code doesn’t seam to work.




thanks to you posted this tutorial.

but now i can’t follow this sample.
cuz i can’t find cp( Chipmank library, ‘window.cp’ )
it maybe not support it on my creator version(1.10.2)

how can i resolve this problem?


This is a 3 year old topic. I’d reckon it’s not quite up to date anymore :slight_smile:

Start here:

there are example projects listed also.