zoukankan      html  css  js  c++  java

  • 第一章 Hello World – A Cross-platform Game

    本章通过制作跨平台的Helloworld来学习：

    • 跨平台游戏背后的理论
    • Cocos2d-JS安装
    • Cocos2d-JS项目文件一览
    • 场景（Scene）、图层（Layers）、精灵（sprite）
    • 预加载图片
    • 添加图片
    • 移除图片

     

    目标：利用模板项目，能自己创建一个跨平台游戏

     

    为何非要制作跨平台游戏？

    　　一次编程，随处运行。适配托管，节省时间

     

    什么是Cocos2d-JS，它如何工作？

    　　Cocos2d-JS是开源2D游戏框架，用JavaScript实现跨平台，能制作web版和原生版应用。

     

    运行之前应做：

    　　下载官方IDE：http://www.cocos2d-x.org/products/codeide（自动补全，代码提示等）

    　　其他编辑器推荐：PSPad(Windows)、TextWrangle(Mac)

    　　服务器相关：WAMP（Windows）、MAMP(Mac)  (编码时非必需。发行相关)

    　　推荐Chrome（高度支持html5）测试程序

    　　下载Cocos2d-JS最新版本：http://www.cocos2d-x.org/download  建议3.x版本

     

    资料 

    　　官方资料：http://www.cocos2d-x.org/wiki/Cocos2d-JS

     　　本书代码下载：http://www.packtpub.com/code_download/20206

    Cocos2d-JS项目结构

    • Cocos2d-html5文件夹：核心库
    • index.html : 包含游戏的网页文件
    • Main.js：cocos2d-js及其函数调用main.js以开始游戏
    • Project.json: 运行游戏时的配置
    • 大部分游戏文件放在src文件夹中

     

    Hello Cross-World (完全可以用文本编辑器制作)

    1. 在游戏文件夹根目录创建index.html，加入如下内容：
    <!DOCTYPE html>
<head>
<title>
My Awesome game
</title>
<script src="cocos2d-html5/CCBoot.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
</head>
<body style="padding:0;margin:0;">
</body>
</html>

    注释：

    <script src="cocos2d-html5/CCBoot.js" type="text/javascript">框架引用

    <script src="main.js" type="text/javascript">游戏入口

    <body style="padding:0;margin:0;">展示游戏(gameCanvas相关)

      　2.  然后创建main.js。这是index引用游戏的接口，控制游戏全局：

    cc.game.onStart = function(){
cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.
SHOW_ALL);
cc.director.runScene(new gameScene());
};
cc.game.run();

    注释： 它远没有看上去那么复杂，只需要关系分辨率配置即可。

    　　我们只需像web设计者一样适配最受欢迎的320*480（portait mode）即可：

    　　cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);

    　　以最低分辨率来配置，可以相当确定您的游戏可以在任何设备上正确运行。

    　　　　或者根据手机和电脑来区分：

    　　if (cc.sys.isMobile)

        　　   cc.view.setDesignResolutionSize(320,500,cc.ResolutionPolicy.FIXED_WIDTH);

    　　else cc.view.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL);

     

    cc.director.runScene(new gameScene());   场景(Scene)：Cocos2d游戏以许多场景组成。gameScene场景就是将要运行的场景。

    　　3. 编写另一个全局文件project.json:

    {
    "debugMode" : 0,
"showFPS" : false,
"frameRate" : 60,
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"cocos2d-html5/",
"modules" : ["cocos2d"],
"jsList" : [
"src/gamescript.js"
]
}

    注释：

    • debugMode: debug警告等级，1~6
    • showFPS: 显示或隐藏帧数（FPS meter），true/false
    • frameRate: 设置游戏帧数，60就十分流畅了
    • id: 这是运行游戏所需的DOM元素。gameCanvas id 就是这个。
    • engineDir: Cocos2d-Js 安装目录。此时应将游戏引擎中的fameworks文件夹拷贝自游戏根目录下
    • modules：需要载入的引擎模块。此时我们只需要基本Cocos2d 库
    • jsList: 使用在游戏中的编程文件名列表。"src/gamescript.js"：意味着将要从此文件开始写游戏

     　　4.  最后我们写游戏脚本本身：gamescript.js(置于根目录下的src目录下)。它包含游戏场景的定义：

    var gameScene = cc.Scene.extend({
    onEnter:function () {
    this._super();
    console.log("my awesome game starts here");
    }
});

    现在，你在浏览器中打开index.html，就可以从开发者控制台看见：

    my awesome game starts here

    说明创建模板类游戏成功！


    预加载和添加图片

    在本例中，我们使用一张64*64 PNG图片：

    在游戏中的等待是令人厌烦的，适当的加载动画会减少这种影响，而且我们的游戏引擎很容易实现它：

    1. 在src中创建loadassets.js文件:
    var gameResources = [
　　"assets/target.png"
];
    　　定义一个名为gameResources的数组储存将预加载的资源。所以我们要在根目录下创建assets目录，放置我们的图片target.png于此。
    2. 在project.json中加入粗体部分以包含文件：
    {
"debugMode" : 0,
"showFPS" : false,
"frameRate" : 60,
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"cocos2d-html5/",
"modules" : ["cocos2d"],
"jsList" : [
"src/loadassets.js",
"src/gamescript.js"
]
}

     3.现在引擎知道加载的图片在哪，只需要在场景开始前预加载即可，修改main.js如下：

    cc.game.onStart = function(){
cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.
SHOW_ALL);
cc.LoaderScene.preload(gameResources, function () {
cc.director.runScene(new gameScene());
}, this);
};
cc.game.run();

    cc.LoaderScene.preload的构造函数会从gameResources加载图像

    4.预加载后还需要将图片加入我们的场景：修改gamescript.js:

    var gameScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var gameLayer = new game();
        gameLayer.init();
        this.addChild(gameLayer);
    }
});
    var game = cc.Layer.extend({
    init:function () {
        this._super();
        var target = cc.Sprite.create("assets/target.png");
        this.addChild(target,0);
    }
});

    Cocos2d-JS的层次结构：

    • Scene包含游戏逻辑，比如主菜单scene, 游戏scene, gameover scene.
    • 每个Scene都有一个或多个Layer。Layer决定内容的显示次序，比如游戏主角层显示在背景层之上，按钮层显示在主角层之上。
    • 每个Layer都有一个或多个Sprite。是图像资源，比如主角，敌人，或者本例中的target.
    • 总结本例：一旦gameScene执行，立即创建 game layer, 添加target sprite到layer中

    在浏览器中打开index.html，就会看见：

    • 预加载动画：

    •  显示图像

     

    我们发现图像在左下角，现在修改gamescript.js，将图像置中：

    var gameScene = cc.Scene.extend({
onEnter:function () {
this._super();
var gameLayer = new game();
gameLayer.init();
this.addChild(gameLayer);
}
});
var game = cc.Layer.extend({
init:function () {
this._super();
var target = cc.Sprite.create("assets/target.png");
this.addChild(target,0);
target.setPosition(160,240);
}
});

     

     

    移除图像和修改背景颜色

    　　我们已经知道用addChild添加图像，同样的，removeChild可以移除图像

    　　同时，添加一个背景层以改变背景颜色：

    var gameScene = cc.Scene.extend({
　　onEnter:function () {
　　　　this._super();
　　　　var gameLayer = new game();
　　　　gameLayer.init();
　　　　this.addChild(gameLayer);
　　}
});
var backgroundLayer;
var game = cc.Layer.extend({
　　init:function () {
　　　　this._super();
　　　　backgroundLayer = cc.LayerColor.create(new cc.Color(40,40,40,255),320, 480);
　　　　this.addChild(backgroundLayer);
　　　　var target = cc.Sprite.create("assets/target.png");
　　　　backgroundLayer.addChild(target,0);
　　　　target.setPosition(160,240);
　　　　setTimeout(function(){
　　　　　　backgroundLayer.removeChild(target);
    　　　　},     3000    );
　　}
});
    • 我们创建了backgroundLayer，并以RGBA格式填充了颜色。
    • setTimeout(function(){
　　　　　　backgroundLayer.removeChild(target);
      　　　　}, 3000);   在3000毫秒后执行内联函数（移除图片）。

     

    总结：

    • 如何安装，配置，运行第一个Cocos2d-js程序
    • 如何放置删除图片
    • 引擎的基本层次结构
    • 小测：随机放置10个target图片于屏幕中
  • 相关阅读:
    浅谈MVVM
    组装数据和页面渲染
    Vuejs实现轮播图
    Vuejs选项卡案例
    选项卡案例
    js中用来操作数组的相关的方法
    js中用来操作字符串的相关的方法
    用逗号拼接字符串，并且去掉最后一个逗号
    微信分享链接或网站文章到微信朋友圈，缩略图片不显示，该如何解决？
    Spring 的介绍和目标
  • 原文地址：https://www.cnblogs.com/wwq1993/p/4359069.html
Copyright © 2011-2022 走看看