cocos2d-js-3.0-final 筆記(一)

時間 2019-11-05

標籤 cocos2d cocos 3.0 final 筆記欄目 Cocos2d-x 简体版

原文原文鏈接

官網的大神已經出了環境搭建視頻了，不贅述，直接到入手階段。html5

首先建立一個項目以後，看看咱們的入口文件index.html
web

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script src="main.js"></script>
</body>
</html>

簡單易懂，就是一個html5頁面，裏面多了個canvas，沒錯，基於我目前的理解，基於html5真的只是基於了html5的canvas,咱們的遊戲畫面就在這個上面渲染完成。canvas

細心的人已經發現這個canvas有width和height，這個咱們稍後再提。
app

接下來咱們看看讀取咱們程序的入口文件app.js
ui

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 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;

        // add a "close" icon to exit the progress. it's an autorelease object
        var closeItem = new cc.MenuItemImage(
            res.CloseNormal_png,
            res.CloseSelected_png,
            function () {
                cc.log("Menu is clicked!");
            }, this);
        closeItem.attr({
            x: size.width - 20,
            y: 20,
            anchorX: 0.5,
            anchorY: 0.5
        });

        var menu = new cc.Menu(closeItem);
        menu.x = 0;
        menu.y = 0;
        this.addChild(menu, 1);

        /////////////////////////////
        // 3. add your codes below...
        // add a label shows "Hello World"
        // create and initialize a label
        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
        // position the label on the center of the screen
        helloLabel.x = size.width / 2;
        helloLabel.y = 0;
        // add the label as a child to this layer
        this.addChild(helloLabel, 5);

        // add "HelloWorld" splash screen"
        this.sprite = new cc.Sprite(res.HelloWorld_png);
        this.sprite.attr({
            x: size.width / 2,
            y: size.height / 2,
            scale: 0.5,
            rotation: 180
        });
        this.addChild(this.sprite, 0);

        this.sprite.runAction(
        		cc.fadeOut(1.1)
          
        );
        helloLabel.runAction(
            cc.spawn(
                cc.moveBy(2.5, cc.p(0, size.height - 40)),
                cc.tintTo(2.5,255,125,0)
            )
        );
        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

裏面寫滿了英文註釋。。 this

這個頁面就涉及了cocos2d-js的幾個基本概念場景scence,層layer,精靈sprite。spa

咱們要在canvas中顯示東西就要先去讀取場景 code

 HelloWorldScene  這個場景  
 這個場景里加載了層 var layer = new HelloWorldLayer();
 而後把層顯示出來  this.addChild(layer);

OK搞定，咱們就要去讀取場景裏層的內容，層中能加載精靈，精靈能作啥呢。。orm

this.sprite = new cc.Sprite(res.HelloWorld_png);   精靈能加載咱們在resouce.js裏預約義好的資源文件
這裏加載了一張圖。

未完，我才發現要寫的這麼多。。待續

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。