[入门教程]使用Cocos2d-html5游戏引擎编写一个简单的游戏 第五回合：添加飞机

Cocos2d-x
#1

添加飞机

  加入了场景，背景之后，这一步，我们将加入一个飞机。在编写代码之前，我们需要获得一张飞机的PNG图片作为素材。并将图片在"res/HD”,”res/Normal"文件夹下(先不考虑分辨率适配的问题)。如图所示： 

 <img title = 'addplane.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_41/41_288414_c3f6c9880db27a6.png' > 

  然后，我们打开src文件下的resource.js，将我们加入的文件用变量定义。引擎将预加载这些资源。

<pre class="brush:js; toolbar: true; auto-links: false;">
var s_HelloWorld = "HelloWorld.jpg";
var s_CloseNormal = "CloseNormal.png";
var s_CloseSelected = "CloseSelected.png";
// 将资源写在这里，程序会预加载这些资源
var s_Plane = "plane.png";

var g_resources = 
    //image
    {src:s_HelloWorld},
    {src:s_CloseNormal},
    {src:s_CloseSelected},
    {src:s_Plane}

    //plist

    //fnt

    //tmx

    //bgm

    //effect
];

现在我们就可以在代码中加入飞机了：

<pre class="brush:js; toolbar: true; auto-links: false;">
var MyLayer = cc.LayerColor.extend({
    plane:null,

    init:function () {

        // 1. super init first
        // 必须调用父类init()方法，很多bug都是由于没有调用父类init()方法造成的
        this._super();
        // 设置Layer的背景，使用RGBA
        this.setColor(cc.c4(126,126,126,126));

        // 获得游戏屏幕的尺寸
        var winSize = cc.Director.getInstance().getWinSize();
        // 获取屏幕坐标原点
        var origin = cc.Director.getInstance().getVisibleOrigin();

        // 创建一个飞机，游戏中大部分物体都能使用cc.Sprite表示
        // 飞机的图案按照cc.rect(x,y,width,height）从图片中截取
        // 以（x,y）为左上角，width为宽，height为高的矩形
        this.plane = cc.Sprite.create(s_Plane,cc.rect(2,168,62,75));
        // 将飞机设置在屏幕底部，居中的位置
        // 图片的锚点在矩形的中心点，设置的就是这个点的位置
        this.plane.setPosition(cc.p(origin.x + winSize/2 , origin.y + this.plane.getContentSize().height/2));

        this.addChild(this.plane,1);

        return true;
    }
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
        layer.init();
    }
});

从代码中我们可以看出，需要从图片中截取飞机，还需要对飞机进行定位，所以下面我画了两张图片帮助大家理解游戏的坐标系。

素材中的坐标系，是以左上角为坐标原点，向右为X轴，向下为Y轴。

planes.png592×560 226 KB

而游戏中，是左下角为坐标原点，向右为X轴，向上为Y轴。

xy.png430×644 99.2 KB

现在运行程序，将看到如下画面（右侧为开发者工具）：

chrome.png771×572 236 KB

上一篇：http://www.cocoachina.com/bbs/read.php?tid=188215
下一篇：http://www.cocoachina.com/bbs/read.php?tid=188216

#2

:12:第四回合呢

#3

送上微信打飞机素材

#4 
<pre class="brush:js; toolbar: true; auto-links: false;">this.plane.setPosition(cc.p(origin.x + winSize/2 , origin.y + this.plane.getContentSize().height/2));

此处winSize应改为

<pre class="brush:js; toolbar: true; auto-links: false;">winSize.width
#5

第23行 winSize/2 是不要应该是winSize.width/2 :7:

#6

不错，学习一下啊

#7

this.plane.setPosition(cc.p(origin.x + winSize/2 , origin.y + this.plane.getContentSize().height/2));
这样不是直接设置它的坐标嘛，并没有设置锚点啊，为毛我觉得这个点应该是图片左下角的开始位置。。。。求解，。。。。。。。。

#8

飞机没有出现呢？

#9

Rect width exceeds maximum margin: Plane.png
我的提示这个错误，怎么解决？本人是新手。。。

#10

是哦，我刚开始也没出来，后来才发现的。

#11

:2: 图片路径this.plane = cc.Sprite.create(“plane.png”,cc.rect(2,168,62,75)); 写成这样没有错，安装LZ的是 this.plane = cc.Sprite.create(s_Plane,cc.rect(2,168,62,75));报错。。。。。

#12

这篇比较多错，综上大家的：

1、this.plane.setPosition(cc.p(origin.x + winSize/2 , origin.y + this.plane.getContentSize().height/2));

此处winSize应改为 winSize.width

2、 this.plane = cc.Sprite.create(s_Plane,cc.rect(2,168,62,75));

此处s_Plane应改为"plane.png"

3、在JSV3.6.1的引擎下，

    // 获得游戏屏幕的尺寸
    var winSize = cc.Director.getInstance().getWinSize();
    // 获取屏幕坐标原点
    var origin = cc.Director.getInstance().getVisibleOrigin();

应改为

    // 获得游戏屏幕的尺寸
    var Winsize = cc.director.getWinSize();
    // 获取屏幕坐标原点
    var origin = cc.director.getVisibleOrigin();

注意大小写

#13

V3.8可以这样写：

    ctor:function () {
        //////////////////////////////
        // 1. super init first
        // 必须调用父类init()方法，很多bug都是由于没有调用父类init()方法造成的
        this._super();
        // 设置Layer的背景
        this.setColor(cc.color(126, 126, 126, 126));
        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        /////////////////////////////
        var size = cc.winSize;
        // 获取屏幕坐标原点
       // var origin = cc.director.getVisibleOrigin();
        //教程原代码：
        //this.plane = cc.Sprite.create(s_Plane,cc.rect(2,168,62,75));
        this.sprite = new cc.Sprite(res.s_Plane_png, cc.rect(2, 168, 62, 120));
        //教程原代码：
        //this.s_Plane_png.attr(cc.p(origin.x + winSize/2 , origin.y + this.s_Plane_png.getContentSize().height/2));
        this.sprite.attr({
            x: size.width / 2,
            y: 0 //origin.y
        });
        this.addChild(this.sprite, 0);