Cocos2d - x - html 5 의 HelloWorld 깊이 분석 및 디 버 깅
29411 단어 Cocos2d - x 학습
빨 간 아이 Cocos2d - X 학습 원지 QQ 군: 249941957
빨 간 아이 Cocos2d - X 학습 단지 QQ2 군: 44208467
Cocos2d - x - html 5 의 HelloWorld 깊이 분석 및 디 버 깅
다른: 이 장 에서 사용 하 는 Cocos2d - x 버 전 은:
Cocos2d-html5-v2.1.1
http://cn.cocos2d-x.org/download
html 5 의 시대 가 다가 오고 있 습 니 다. 여러 플랫폼 에서 편리 하 게 운영 되 고 OPENGL 을 사용 하여 도형 렌 더 링 을 할 수 있 습 니 다. html 5 를 대량으로 사용 하여 개발 한 2D 와 3D 게임 이 쏟 아 지고 있 습 니 다. Cocos2d - x 도 상황 에 따라 해당 하 는 버 전 을 출시 했 습 니 다. 오늘 은 Cocos2d - x 가 Html 5 에서 어떻게 운영 되 고 개발 되 며 디 버 깅 하 는 지 배 워 보 겠 습 니 다.
HelloHTML 5 World 를 열 면 다음 파일 과 디 렉 터 리 를 볼 수 있 습 니 다.
res: 자원 이미지 디 렉 터 리:
src: 현재 프로그램의 js 파일 디 렉 터 리:
main. js: 주 논리 js 코드 파일
index. html: html 5 웹 파일
cocos2d. js: Cocos2d - x 라 이브 러 리 파일 불 러 오기
build. xml: cocos2d - x 의 html 5 플랫폼 버 전 으로 생 성 된 파일 목록 보고 서 를 컴 파일 합 니 다.
. DS Store: 시스템 디 렉 터 리 에 속성 저장 파일 을 표시 하고 삭제 할 수 있 습 니 다.
우 리 는 브 라 우 저 로 index. html 를 직접 열 면 다음 을 볼 수 있 습 니 다.
원본 코드:
Cocos2d-html5 Hello World test
보시 다시 피 이 안의 관건 적 인 요점 은 두 곳 입 니 다.
1.
html 5 에 캔버스 (canvas) 를 만 들 고 이름과 크기 를 설정 합 니 다.
2.
홈 페이지 에 cocos2d. js 를 불 러 왔 습 니 다.
cocos2d. js 를 열 면 아래 코드 를 볼 수 있 습 니 다.
(function () {
// d
var d = document;
// c ， 。
var c = {
COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
box2d:false,// box2d
chipmunk:false,// chipmunk
showFPS:true,// FPS
frameRate:60,// 60
loadExtension:false,
tag:'gameCanvas', // cocos2d-x
engineDir:'../cocos2d/',// ， cocos2d
//SingleEngineFile:'',// 。
appFiles:[// js 。
'src/resource.js',//
'src/myApp.js'//
]
};
// ， DOM 。
window.addEventListener('DOMContentLoaded', function () {
//
var s = d.createElement('script');
// c SingleEngineFile engineDir ， s SingleEngineFile ， ， ， 。
if (c.SingleEngineFile && !c.engineDir) {
s.src = c.SingleEngineFile;
}
// engineDir ， s engineDir ， “../cocos2d/platform/jsloader.js”。
else if (c.engineDir && !c.SingleEngineFile) {
s.src = c.engineDir + 'platform/jsloader.js';
}
else {
// ， c 。
alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');
}
// c 。
document.ccConfig = c;
// ‘script’ id ’cocos2d-html5’.
s.id = 'cocos2d-html5';
// script HTML 。
d.body.appendChild(s);
//else if single file specified, load singlefile
});
})();
이 페이지 코드 의 역할 은 html 페이지 끝 에 추가 하 는 것 입 니 다.
“
다음은 cocos 2d 디 렉 터 리 의 'platform / jsloader. js' 를 엽 니 다.
// 。
(function () {
// engine ， cocos2d-x 。
var engine = [
'platform/CCClass.js',
'platform/miniFramework.js',
'platform/CCCommon.js',
'platform/ZipUtils.js',
'platform/base64.js',
'platform/gzip.js',
'platform/CCMacro.js',
'platform/CCFileUtils.js',
'platform/CCTypes.js',
'platform/zlib.min.js',
'cocoa/CCGeometry.js',
'platform/Sys.js',
'platform/CCConfig.js',
'cocoa/CCSet.js',
'cocoa/CCNS.js',
'cocoa/CCAffineTransform.js',
'support/CCPointExtension.js',
'support/CCUserDefault.js',
'base_nodes/CCNode.js',
'base_nodes/CCAtlasNode.js',
'textures/CCTexture2D.js',
'textures/CCTextureCache.js',
'textures/CCTextureAtlas.js',
'misc_nodes/CCRenderTexture.js',
'misc_nodes/CCProgressTimer.js',
'effects/CCGrid.js',
'effects/CCGrabber.js',
'actions/CCAction.js',
'actions/CCActionInterval.js',
'actions/CCActionInstant.js',
'actions/CCActionManager.js',
'actions/CCActionProgressTimer.js',
'actions/CCActionCamera.js',
'actions/CCActionEase.js',
'actions/CCActionGrid.js',
'actions/CCActionTiledGrid.js',
'actions/CCActionCatmullRom.js',
'layers_scenes_transitions_nodes/CCScene.js',
'layers_scenes_transitions_nodes/CCLayer.js',
'layers_scenes_transitions_nodes/CCTransition.js',
'layers_scenes_transitions_nodes/CCTransitionProgress.js',
'layers_scenes_transitions_nodes/CCTransitionPageTurn.js',
'sprite_nodes/CCSprite.js',
'sprite_nodes/CCAnimation.js',
'sprite_nodes/CCAnimationCache.js',
'sprite_nodes/CCSpriteFrame.js',
'sprite_nodes/CCSpriteFrameCache.js',
'sprite_nodes/CCSpriteBatchNode.js',
'label_nodes/CCLabelAtlas.js',
'label_nodes/CCLabelTTF.js',
'label_nodes/CCLabelBMFont.js',
'particle_nodes/CCParticleSystem.js',
'particle_nodes/CCParticleSystemQuad.js',
'particle_nodes/CCParticleExamples.js',
'particle_nodes/CCParticleBatchNode.js',
'touch_dispatcher/CCTouchDelegateProtocol.js',
'touch_dispatcher/CCTouchHandler.js',
'touch_dispatcher/CCTouchDispatcher.js',
'touch_dispatcher/CCMouseDispatcher.js',
'keyboard_dispatcher/CCKeyboardDelegate.js',
'keyboard_dispatcher/CCKeyboardDispatcher.js',
'text_input_node/CCIMEDispatcher.js',
'text_input_node/CCTextFieldTTF.js',
'CCDirector.js',
'CCCamera.js',
'CCScheduler.js',
'CCLoader.js',
'CCDrawingPrimitives.js',
'platform/CCApplication.js',
'platform/CCSAXParser.js',
'platform/AppControl.js',
'menu_nodes/CCMenuItem.js',
'menu_nodes/CCMenu.js',
'tileMap_parallax_nodes/CCTMXTiledMap.js',
'tileMap_parallax_nodes/CCTMXXMLParser.js',
'tileMap_parallax_nodes/CCTMXObjectGroup.js',
'tileMap_parallax_nodes/CCTMXLayer.js',
'tileMap_parallax_nodes/CCParallaxNode.js',
'menu_nodes/CCMenuItem.js',
'menu_nodes/CCMenu.js',
'base_nodes/CCdomNode.js',
'../CocosDenshion/SimpleAudioEngine.js'
];
// d， d ccCofing c.
var d = document;
var c = d.ccConfig;
// c loadExtension ， ， engine cocos2d-x 。
if (c.loadExtension != null && c.loadExtension == true) {
engine = engine.concat([
'../extensions/GUI/CCControlExtension/CCControl.js',
'../extensions/GUI/CCControlExtension/CCControlButton.js',
'../extensions/GUI/CCControlExtension/CCControlUtils.js',
'../extensions/GUI/CCControlExtension/CCInvocation.js',
'../extensions/GUI/CCControlExtension/CCScale9Sprite.js',
'../extensions/GUI/CCControlExtension/CCMenuPassive.js',
'../extensions/GUI/CCControlExtension/CCControlSaturationBrightnessPicker.js',
'../extensions/GUI/CCControlExtension/CCControlHuePicker.js',
'../extensions/GUI/CCControlExtension/CCControlColourPicker.js',
'../extensions/GUI/CCControlExtension/CCControlSlider.js',
'../extensions/GUI/CCControlExtension/CCControlSwitch.js',
'../extensions/GUI/CCScrollView/CCScrollView.js',
'../extensions/GUI/CCScrollView/CCSorting.js',
'../extensions/GUI/CCScrollView/CCTableView.js',
'../extensions/CCBReader/CCNodeLoader.js',
'../extensions/CCBReader/CCBReaderUtil.js',
'../extensions/CCBReader/CCControlLoader.js',
'../extensions/CCBReader/CCSpriteLoader.js',
'../extensions/CCBReader/CCNodeLoaderLibrary.js',
'../extensions/CCBReader/CCBReader.js',
'../extensions/CCBReader/CCBValue.js',
'../extensions/CCBReader/CCBKeyframe.js',
'../extensions/CCBReader/CCBSequence.js',
'../extensions/CCBReader/CCBRelativePositioning.js',
'../extensions/CCBReader/CCBAnimationManager.js',
'../extensions/CCControlEditBox.js'
]);
}
// c engineDir ， engine。
if (!c.engineDir) {
engine = [];
}
else {
// c engineDir
// c box2d chipmunk， engine cocos2d-x 。
if(c.box2d || c.chipmunk){
engine.push('Draw_Nodes/CCDrawNode.js');
engine.push('physics_nodes/CCPhysicsSprite.js');
engine.push('physics_nodes/CCPhysicsDebugNode.js');
if (c.box2d)
engine.push('../box2d/box2d.js');
if (c.chipmunk)
engine.push('../chipmunk/chipmunk.js');
}
// engine ， 。
engine.forEach(function (e, i) {
engine[i] = c.engineDir + e;
});
}
//
var loaded = 0;
// engine c appFiles （ js）， que。
var que = engine.concat(c.appFiles);
// js 。
que.push('main.js');
// IE9
if (navigator.userAgent.indexOf("Trident/5") > -1) {
// IE9
// serial， -1
this.serial = -1;
// loadNext
var loadNext = function () {
// s serial+1
var s = this.serial + 1;
// s que .
if (s < que.length) {
// ， f
var f = d.createElement('script');
// script src s que 。
f.src = que[s];
// s f serial。
f.serial = s;
// scrip loadNext。
f.onload = loadNext;
// scrip HTML .
d.body.appendChild(f);
// p， 。
p = s / (que.length - 1);
}
};
// ， ， html ：‘jsloader. js 의 역할 은 cocos2d - x 에 사용 할 모든 js 파일 과 'resource. js',' my App. js', 'main. js' 를 불 러 오 는 것 임 을 알 수 있 습 니 다.
'resource. js' 열기:
// 。
var s_HelloWorld = "res/HelloWorld.png";
var s_CloseNormal = "res/CloseNormal.png";
var s_CloseSelected = "res/CloseSelected.png";
// ， 。
var g_ressources = [
//image
{type:"image", src:s_HelloWorld},
{type:"image", src:s_CloseNormal},
{type:"image", src:s_CloseSelected}
//plist
//fnt
//tmx
//bgm
//effect
];
위의 파일 은 주로 프로그램 이 사용 할 자원 정 보 를 정의 하 는 것 입 니 다.
myApp. js 열기:
// cocos2d-x CircleSprite . _radians 0， 。
var CircleSprite = cc.Sprite.extend({
_radians:0,
// ( ) ctor， 。
ctor:function () {
this._super();
},
// （ ） draw。 。
draw:function () {
//
//
cc.renderContext.fillStyle = "rgba(255,255,255,1)";
//
cc.renderContext.strokeStyle = "rgba(255,255,255,1)";
// _radians 0， 360。
if (this._radians < 0)
this._radians = 360;
// cocos2d-x ， CCDrawingPrimitives.js ，drawCircle:function (center, radius, angle, segments, drawLineToCenter)， ， ， ， ， 。
cc.drawingUtil.drawCircle(cc.PointZero(), 30, cc.DEGREES_TO_RADIANS(this._radians), 60, true);
},
// myUpdate， _raduans 6。 6 ， FPS 60， 360 。
myUpdate:function (dt) {
this._radians -= 6;
//this._addDirtyRegionToDirector(this.getBoundingBoxToWorld());
}
});
// Cocos2d-x HelloWorld.
var Helloworld = cc.Layer.extend({
//
isMouseDown:false,
helloImg:null,
helloLabel:null,
circle:null,
sprite:null,
// 。
init:function () {
// 。
var selfPointer = this;
// 。
this._super();
//
var size = cc.Director.getInstance().getWinSize();
// ， 。
var closeItem = cc.MenuItemImage.create(
"res/CloseNormal.png",
"res/CloseSelected.png",
function () {
history.go(-1);
},this);
// 。
closeItem.setAnchorPoint(cc.p(0.5, 0.5));
// ， 。
var menu = cc.Menu.create(closeItem);
menu.setPosition(cc.PointZero());
this.addChild(menu, 1);
// 。
closeItem.setPosition(cc.p(size.width - 20, 20));
// ， “HelloWorld”。
this.helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38);
// 。
this.helloLabel.setPosition(cc.p(size.width / 2, 0));
// 。
this.addChild(this.helloLabel, 5);
// lazyLayer
var lazyLayer = new cc.LazyLayer();
this.addChild(lazyLayer);
// ， ， ， 。
this.sprite = cc.Sprite.create("res/HelloWorld.png");
this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));
this.sprite.setScale(0.5);
this.sprite.setRotation(180);
// lazyLayer.
lazyLayer.addChild(this.sprite, 0);
// 。
var rotateToA = cc.RotateTo.create(2, 0);
var scaleToA = cc.ScaleTo.create(2, 1, 1);
// ， 。
this.sprite.runAction(cc.Sequence.create(rotateToA, scaleToA));
// ， 。
this.circle = new CircleSprite();
this.circle.setPosition(cc.p(40, size.height - 60));
this.addChild(this.circle, 2);
// ， 1/60 MyUpdate 。
this.circle.schedule(this.circle.myUpdate, 1 / 60);
// 。
this.helloLabel.runAction(cc.MoveBy.create(2.5, cc.p(0, size.height - 40)));
// 。
this.setTouchEnabled(true);
// 。
this.adjustSizeForWindow();
//lazyLayer 。
lazyLayer.adjustSizeForCanvas();
// adjustSizeForWindow
window.addEventListener("resize", function (event) {
selfPointer.adjustSizeForWindow();
});
return true;
},
// ， Cocos2d-x 。
adjustSizeForWindow:function () {
// body ， margin。
var margin = document.documentElement.clientWidth - document.body.clientWidth;
// html5 800， cocos2d-x html5 800 ， cocos2d-x 。
if (document.documentElement.clientWidth < cc.originalCanvasSize.width) {
cc.canvas.width = cc.originalCanvasSize.width;
} else {
// ， cocos2d-x html5 body 。
cc.canvas.width = document.documentElement.clientWidth - margin;
}
// html5 450， cocos2d-x html5 450 。
if (document.documentElement.clientHeight < cc.originalCanvasSize.height) {
cc.canvas.height = cc.originalCanvasSize.height;
} else {
// ， cocos2d-x html5 body 。
cc.canvas.height = document.documentElement.clientHeight - margin;
}
// cocos2d-x HTML5
var xScale = cc.canvas.width / cc.originalCanvasSize.width;
var yScale = cc.canvas.height / cc.originalCanvasSize.height;
// ， ， 。
if (xScale > yScale) {
xScale = yScale;
}
// Cocos2d-x 。
cc.canvas.width = cc.originalCanvasSize.width * xScale;
cc.canvas.height = cc.originalCanvasSize.height * xScale;
// id Cocos2dGameContainer div 。
var parentDiv = document.getElementById("Cocos2dGameContainer");
if (parentDiv) {
// style
parentDiv.style.width = cc.canvas.width + "px";
parentDiv.style.height = cc.canvas.height + "px";
}
// cocos2d-x 。
cc.renderContext.translate(0, cc.canvas.height);
cc.renderContext.scale(xScale, xScale);
// cocos2d-x 。
cc.Director.getInstance().setContentScaleFactor(xScale);
},
// （ ） 。
menuCloseCallback:function (sender) {
// cocos2d-x 。
cc.Director.getInstance().end();
},
// 。
onTouchesBegan:function (touches, event) {
// isMouseDown ture
this.isMouseDown = true;
},
// 。
onTouchesMoved:function (touches, event) {
// isMouseDown ture。
if (this.isMouseDown) {
// .
if (touches) {
// ， 。
//this.circle.setPosition(cc.p(touches[0].getLocation().x, touches[0].getLocation().y));
}
}
},
//
onTouchesEnded:function (touches, event) {
// isMouseDown false
this.isMouseDown = false;
},
// ( ), touchesCancelled 。
onTouchesCancelled:function (touches, event) {
//
console.log("onTouchesCancelled");
}
});
// cocos2d-x HelloWorldScene。
var HelloWorldScene = cc.Scene.extend({
// onEnter 。
onEnter:function () {
// cc.Scene 。
this._super();
// Helloworld 。
var layer = new Helloworld();
layer.init();
// 。
this.addChild(layer);
}
});
"my App. js 는 프로그램 이 사용 하 는 층 과 장면 을 실현 한 것 을 알 수 있 습 니 다. 이것 은 이 프로그램의 핵심 논리 입 니 다. 만약 에 본 보가 WIN 32 버 전에 쓴 것 을 본 적 이 있다 면""Cocos2d - x HelloWorld 심층 분석". 층 과 장면 에 대한 이러한 처 리 는 이해 하기 쉽 습 니 다. 하지만 adjust SizeForWindow 라 는 함 수 는 캔버스 의 크기 초기 화 에 도 큰 화 제 를 불 러 일 으 켰 습 니 다. 웹 창 크기 를 바 꿀 때 캔버스 크기 를 자동 으로 웹 페이지 크기 로 설정 하 는 방법 을 소개 합 니 다. 수정 하기 전에 이것 을 먼저 보 세 요.
자, 지금부터 칼 을 휘 두 르 겠 습 니 다.
Helloworld 층 에 변 수 를 추가 합 니 다.
sizeLabel:null,
그리고 우 리 는 Hello World 문자 라벨 에 가입 합 니 다.
/ / 디 스 플레이 크기
this.sizeLabel =cc.LabelTTF.create("ClientSize:CanvasSize","Arial",16);
this.sizeLabel.setPosition(cc.p(size.width / 2, 100));
this.addChild(this.sizeLabel, 4);
마지막 으로 저 희 는 adjust Size ForWindow 함수 끝 에 가입 합 니 다.
/ / 문자열 변수
var sizeString= "ClientSize:[Width:"+document.documentElement.clientWidth+",Height:"+document.documentElement.clientHeight+"]- bodySize:[Width:" +document.body.clientWidth+",Height:"+document.body.clientHeight+"]-CanvasSize:[Width:"+cc.canvas.width+",Height:"+cc.canvas.height+"]";
this.sizeLabel.setString(sizeString);
실행 하기:
이렇게 하면 각 크기 를 편리 하 게 관찰 할 수 있다.
그리고 코드 를 계속 수정 합 니 다. 우선 lazy Layer 코드 차단 을 만 들 것 입 니 다. :
// var lazyLayer =new cc.LazyLayer();
// this.addChild(lazyLayer);
그리고 lazy Layer 를 현재 층 의 코드 에 추가 합 니 다.
//lazyLayer.addChild(this.sprite, 0);
다음으로 바 꾸 기:
this.addChild(this.sprite);
lazyLayer 설정 크기 적응 코드 차단:
//lazyLayer.adjustSizeForCanvas();
이후 adjustSize ForWindow 수정:
adjustSizeForWindow:function () {
/* 。
var margin = document.documentElement.clientWidth - document.body.clientWidth;
if (document.documentElement.clientWidth < cc.originalCanvasSize.width) {
cc.canvas.width = cc.originalCanvasSize.width;
} else {
cc.canvas.width = document.documentElement.clientWidth - margin;
}
if (document.documentElement.clientHeight < cc.originalCanvasSize.height) {
cc.canvas.height = cc.originalCanvasSize.height;
} else {
cc.canvas.height = document.documentElement.clientHeight - margin;
}
*/
//
cc.canvas.width = document.documentElement.clientWidth;
cc.canvas.height = document.documentElement.clientHeight;
// X Y
var xScale = cc.canvas.width / cc.originalCanvasSize.width;
var yScale = cc.canvas.height / cc.originalCanvasSize.height;
/*
if (xScale > yScale) {
// xScale = yScale;
}
cc.canvas.width = cc.originalCanvasSize.width * xScale;
cc.canvas.height = cc.originalCanvasSize.height * yScale;
*/
var parentDiv = document.getElementById("Cocos2dGameContainer");
if (parentDiv) {
parentDiv.style.width = cc.canvas.width + "px";
parentDiv.style.height = cc.canvas.height + "px";
}
// 。
cc.renderContext.translate(0, cc.canvas.height);
cc.renderContext.scale(xScale, yScale);
cc.Director.getInstance().setContentScaleFactor(xScale);
//
var size = cc.Director.getInstance().getWinSize()
var sizeString = "ClientSize:[Width:"+document.documentElement.clientWidth+",Height:"+document.documentElement.clientHeight+"] - bodySize:[Width:" + document.body.clientWidth+",Height:"+document.body.clientHeight+"]- CanvasSize:[Width:"+cc.canvas.width+",Height:"+cc.canvas.height+"]";
this.sizeLabel.setString(sizeString);
},
이렇게 해서 우리 가 창 을 끌 어 다 놓 을 때 캔버스 크기 는 창 크기 에 따른다.
마지막 으로 main. js: 코드 를 보고 main. js 를 엽 니 다.
// cc.Application cocos2d-x 。
var cocos2dApp = cc.Application.extend({
// config， ccConfig.
config:document['ccConfig'],
// ctor。
ctor:function (scene) {
// 。
this._super();
// scene startScene 。
this.startScene = scene;
// Cocos2d-x 。
// DEBUG
cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
// Debug 。
cc.initDebugSetting();
// config tag ， ’gameCanvas' cc.setup 。
cc.setup(this.config['tag']);
// Cocos2d-x 。
cc.Loader.getInstance().onloading = function () {
// draw ， 。
cc.LoaderScene.getInstance().draw();
};
// Cocos2d-x 。
cc.Loader.getInstance().onload = function () {
// didFinishLaunchingWithOptions 。
cc.AppController.shareAppController().didFinishLaunchingWithOptions();
};
// 。
cc.Loader.getInstance().preload(g_ressources);
},
// applicationDidFinishLaunching 。
applicationDidFinishLaunching:function () {
// Cocos2d-x 。
var director = cc.Director.getInstance();
//
// director->enableRetinaDisplay(true);
// config showFPS FPS
director.setDisplayStats(this.config['showFPS']);
// FPS
director.setAnimationInterval(1.0 / this.config['frameRate']);
// 。
director.runWithScene(new this.startScene());
return true;
}
});
// ， HelloWorldScene。
var myApp = new cocos2dApp(HelloWorldScene);
main. js 는 쉽게 이해 할 수 있 습 니 다. 장면 운행 장면 을 만 듭 니 다. 그러나 중요 한 함수 cc. setup 이 있 습 니 다. 다음 을 말 해 야 합 니 다.
coco2d / platform 에 있 는 CCApplication. js 를 열 어 보 겠 습 니 다.
// cc.setup ， ，
cc.setup = function (el, width, height) {
// cc id el id ’#’+el 。
var element = cc.$(el) || cc.$('#' + el);
// tgaName ’CANVAS’， ， 。
if (element.tagName == "CANVAS") {
width = width || element.width;
height = height || element.height;
// HTML5 DIV cc.container 。
cc.container = cc.$new("DIV");
//
cc.canvas = element;
// DIV 。
cc.canvas.parentNode.insertBefore(cc.container, cc.canvas);
cc.canvas.appendTo(cc.container);
// ， ， ， ， 480,320。
cc.container.style.width = (width || 480) + "px";
cc.container.style.height = (height || 320) + "px";
// DIV id ’Cocos2dGameContainer’， myApp.js id Cocos2dGameContainer div ， DIV 。
cc.container.setAttribute('id', 'Cocos2dGameContainer');
// DIV DIV 。
cc.canvas.setAttribute("width", width || 480);
cc.canvas.setAttribute("height", height || 320);
} else {// tgaName ’DIV’。
if (element.tagName != "DIV") {
cc.log("Warning: target element is not a DIV or CANVAS");
}
// ， ， ， ， DIV 。
width = width || parseInt(element.style.width);
height = height || parseInt(element.style.height);
// HTML5 Canvas cc.canvas
cc.canvas = cc.$new("CANVAS");
// cc.canvas gameCanvas
cc.canvas.addClass("gameCanvas");
// DIV DIV 。
cc.canvas.setAttribute("width", width || 480);
cc.canvas.setAttribute("height", height || 320);
// DIV cc.container DIV 。
cc.container = element;
element.appendChild(cc.canvas);
// ， ， ， ， 480,320。
cc.container.style.width = (width || 480) + "px";
cc.container.style.height = (height || 320) + "px";
}
// DIV style 。
cc.container.style.position = 'relative';
cc.container.style.overflow = 'hidden';
cc.container.top = '100%';
// cc.canvas Context cc.renderContext， DIV 。
cc.renderContext = cc.canvas.getContext("2d");
//
cc.renderContextType = cc.CANVAS;
//
if (cc.renderContextType == cc.CANVAS) {
// cocos2d-x 0,0 ， html 0,0 ， html ， 。
cc.renderContext.translate(0, cc.canvas.height);
// cc.drawingUtil 。
cc.drawingUtil = new cc.DrawingPrimitiveCanvas(cc.renderContext);
}
// Cocos2dx 。
cc.originalCanvasSize = cc.size(cc.canvas.width, cc.canvas.height);
// DIV。
cc.gameDiv = cc.container;
//
cc.log(cc.ENGINE_VERSION);
//
cc.setContextMenuEnable(false);
// ， ， 。
if(cc.Browser.isMobile)
cc._addUserSelectStatus();
// 。
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (!document[hidden])
cc.Director.getInstance()._resetLastUpdate();
}
if (typeof document.addEventListener === "undefined" ||
typeof hidden === "undefined") {
cc.isAddedHiddenEvent = false;
} else {
cc.isAddedHiddenEvent = true;
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
};
자, 모든 js 코드 가 기본적으로 끝 났 습 니 다. 이 제 는 전체 프로그램의 절 차 를 더 잘 표시 하기 위해 서 Firefox 를 설치 한 Firefox 브 라 우 저 로 디 버 깅 을 진행 합 니 다. Firefox 를 설치 한 다음 구성 요소 관리자 에 Firefox 를 설치 하 십시오.
FireBug 는 js 를 편리 하 게 디 버 깅 하고 변수 와 스 택 을 감시 할 수 있 습 니 다.
Firefox 로 index. html 를 엽 니 다. 이후 우 리 는 캔버스 에서 오른쪽 단 추 를 누 르 고 "FireBug 로 요 소 를 봅 니 다":
해당 문장 에 대응 하 는 요소 가 웹 페이지 에 파란색 으로 표시 되 는 것 을 볼 수 있다.
우 리 는 FireBug 에서 스 크 립 트 를 켜 서 cocos2d. js 에 들 어 갑 니 다. 우 리 는 그 중의 끝 에 정지점 을 추가 한 후에 페이지 를 다시 불 러 옵 니 다. 우 리 는 중 단 된 코드 와 오른쪽 감 시 를 볼 수 있 습 니 다.
d. body. appendChild 의 매개 변수 s 의 속성 표 는?
src=”../cocos2d/platform/jsloader.js”,id=”cocos2d-html5”.
그래서 이 문장 을 실행 한 후에 jsloader. js 를 호출 합 니 다. 이 인 스 턴 스 를 추가 하 는 데 사용 되 는 js 에 정지점 을 추가 합 니 다.
보 입 니 다. 오른쪽 que 의 배열 요소 끝 에 "resource. js", "my App. js", "main. js" 를 추가 하 였 습 니 다.
우 리 는 main. js 에서 정지점 을 추가 하여 cc. setup 의 함수 실행 상황 을 볼 수 있 습 니 다.
F11 을 누 르 면 입장:
함수 내부 에 들 어가 면 오른쪽 에서 매개 변수 값 을 보고 추적 하여 실행 할 수 있 습 니 다.
FireBug 의 추적 을 통 해 우 리 는 js 스 크 립 트 의 전체 실행 상황 을 깊이 이해 할 수 있 습 니 다. main. js 에서 우 리 는 정지점 을 추가 하여 현재 웹 페이지 의 표시 상 태 를 관찰 할 수 있 습 니 다. 정지점 이 없 으 면 이 진도 에 표 시 된 페이지 를 본 적 이 있 습 니까? 자, 수업 이 끝 납 니 다!
좋은 웹페이지 즐겨찾기
