about Cocos2d-JS

1. About Cocos2d-JS
Fumitoshi Ogata

2. Table of Contents
01.Self Introduction
02.Reason why I choose Cocos2d-JS
03.Exp1
[Think About Performance using
ViewPortClipping]
04.Exp2
[Think About Saving to localStorage]

3. Self
Introduction

4. I am a former accounting
software engineer.
I have developed independent
games,and i am now involved
in a game production to utilize
my expertise.
OEDO-WORLD(mixi app) / PHP + 3d-studio-max

8. Reason why I chose
'Cocos2d-JS' as SDK

9. When I want to create games,
the question is always ‘should I
choose browser or native
application?

10. With browser development,
developers have too many
choices, and the differences
among the teams are also big.

11. As a Developer,I be prepared to
be able to create both browser
and native-app games just in
case whichever becomes a
mainstream.

13. Exp1
Think About
Performance.

14. What is stress first of all?
Game is composed of a lot of
elements. isn't it?(collision
detection,score
management,and drawing etc..)

15. The answer is 'draw'.
In the case of Cocos2d-JS,a lot
of 'setPosition' are called for
drawing a Node.

16. Nodes you can use are limited!
Using iPhone4S
Cocos2d-x …. 1863 sprites
Cocos2d-browser 300~500 sprites
 http://www.slideshare.net/crooz_techblog/7-
131112144201phpapp01

17. To increase the performance,
you should use
'ViewPortClipping'.
'ViewPort Clipping' is a process
that you clip outside of the
viewport.

18. This is a huge world,and the
world have 100 enemies.
When drawing a map of a vast
world with 100 enemies with
60FPS, ‘set Position’ is called for
as many as 6000 times!!

19. If you can draw only the enemies who exist
inside your view,you may be able to reduce some
stress of drawing.

20. You must create a function that let you decide
whether or not your position is inside the
viewport.
When you set it as the value of 'setVisible',you
can decrease the amount of 'setPosition'.
Enemy.js
update:function(){
if(this.game.isInsideOfCameraRange(this.mapX,this.mapY)){
this.setVisible(true);
this.setPosition(this.mapX,this.mapY);
}else{
this.setVisible(false);
}
}

21. Use case
http://oggata.github.io/Cocos2dJSv3SampleGame/
iPhone4S viewPortClipOff 170 /On 500-

22. Exp2
Think About saving
to localStorage.

23. Game data are usually saved in the
database on a server.
How often game data should be
saved in the database?
If you save data every time you
make a move,
You may not able to play this game
well at locations where the
reception is poor such as in a train.

24. How about saving position data
to browser and the final-score to
server?
As you know, you can use
'HTML5 localStorage', to save
and load game data.

25. Set
Get

26. Use case
http://oggata.github.io/Cocos2dJSShogiSample/publish/html5/

27. Be creative to improve
performance, Let's start browser
game development!!