HTML5遊戲開發引擎,初識CreateJS

時間 2019-12-10

標籤 html5 html 遊戲開發引擎 createjs 欄目 HTML5 简体版

原文原文鏈接

CreateJS爲CreateJS庫，能夠說是一款爲HTML5遊戲開發的引擎。打造 HTML5 遊戲，構建新遊戲，提供構建最新 HTML5 的技術、你能夠經過這個網站學習如何構建跨平臺和跨終端遊戲。這個資源庫還會告訴你如何構建多人在線遊戲。CreateJS 是一套能夠構建豐富交互體驗的 HTML5 遊戲的開源工具包，旨在下降 HTML5 項目的開發難度和成本，讓開發者以熟悉的方式打造更具現代感的網絡交互體驗。javascript

v準備工做

1.進入createjs首頁： html

首頁有幾個tab頁，有EASEJS、TweenJS、SoundJS、PrloadJS、ZOE五種.(最新的官網好像沒有ZOE的tab頁了，不過在http://createjs.com/downloads下載頁面的最下面仍是能夠找到下載的。)

EASEJS：用來處理HTML5的canvas
TWEENJS：用來處理HTML5的動畫調整和javascript屬性
SOUNDJS：用來幫助簡化處理音頻相關的API
PRELOADJS：管理和協調程序加載項的類庫
ZOE：將SWF動畫導出爲EaseIJS的sprite的工具

基於這些庫，能夠很是快捷地開發出基於HTML5的遊戲、動畫和交互應用。運行環境請使用Safari, Chrome, Firefox 或者 IE 9+ 。

2.首頁解析： java

3.進入下載頁：http://createjs.com/downloads git

由於這篇博客主要介紹HTML5遊戲開發的引擎canvas,因此咱們下載EASEJS就能夠了。

4.幫助文檔： github

幫助文檔裏有不少類的介紹，還有對應類的方法、屬性、事件的介紹。不過是英文版本的，暫時尚未找到比較好的中文的版本。ps:若是英文比較差的園友，那就只能用web工具強硬翻譯了。具體web工具翻譯頁面的方法能夠看我以前的一篇博客：谷歌/微軟/必應web頁面免費翻譯插件

5.引入主要JS： web

這個文件是咱們須要引入的js文件。

v簡單demo

1.html代碼： canvas

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>First Canvas for CNBlogs</title>
    <script src="EaselJS-0.8.1/lib/easeljs-0.8.1.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script src="Scripts/Index.js"></script>
</body>
</html>

2.js代碼： api

var canvas;
var stage;
var txt;
var count = 0;
window.onload = function () {
    canvas = document.getElementById("canvas");

    // 建立一個舞臺對象
    stage = new createjs.Stage(canvas);
    txt = new createjs.Text("Hello CNBlogs->", "20px Arial", "#ff7700");
    stage.addChild(txt);

    createjs.Ticker.addEventListener("tick", tick);
}

function tick(e)
{
    count++;
    txt.text = "Hello CNBlogs->" + count + "☺";
    stage.update();
}

3.運行效果： 網絡

v鼠標通過特效

1.html代碼： 框架

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>First Canvas for CNBlogs</title>
    <script src="EaselJS-0.8.1/lib/easeljs-0.8.1.min.js"></script>
</head>
<body>
    <canvas id="canvas" style="border:1px #000 solid;" width="1000" height="500"></canvas>
    <script src="Scripts/Flash.js"></script>
</body>
</html>

2.js代碼：

var canvas;
var stage;
var img = new Image();
var sprite;
window.onload = function () {
    canvas = document.getElementById("canvas");
    // 建立一個舞臺對象
    stage = new createjs.Stage(canvas);
    stage.addEventListener("stagemousedown", clickCanvas);
    stage.addEventListener("stagemousemove", moveCanvas);
    var data = {
        images: ["cnblogsLogo.png"],
        frames: { width: 20, height: 20, regX: 10, regY: 10 }
    }
  
    // 關於EaselJS的一些屬性或者方法你們能夠根據對應的api文檔熟悉熟悉。
    //例如Sprite能夠在這裏找到
    // file:.../EaselJS-0.8.1/docs/EaselJS_docs-0.8.1/classes/Sprite.html
    sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
    createjs.Ticker.setFPS(20);
    createjs.Ticker.addEventListener("tick", tick);
}

function tick(e) {
    var t = stage.getNumChildren();
    for (var i = t-1; i >0; i--) {
        var st = stage.getChildAt(i);

        // 設置單位幀的位置
        st.vY += 2;
        st.vX += 1;
        st.x += st.vX;
        st.y += st.vY;

        // 設置大小變形
        st.scaleX = st.scaleY = st.scaleX + st.vS;
        // 設置透明度
        st.alpha += st.vA;
        if (st.alpha <= 0 || st.y > canvas.height) {
            // 若是超標則移除當前的
            stage.removeChildAt(i);
        }
    }

    // 每作一次操做，須要對舞臺一次更新
    stage.update(e);
}

function clickCanvas(e) {
    // 設置鼠標點擊出現的圖案多
    addS(Math.random() * 200 + 100, stage.mouseX, stage.mouseY, 2);
}

function moveCanvas(e) {
    // 設置鼠標通過出現的圖案少
    addS(Math.random() * 2 + 10, stage.mouseX, stage.mouseY, 1);
}

// addS方法中全部小數或者隨機數都是能夠根據具體需求隨意設置的，
function addS(count,x,y,speed) {
    for (var i = 0; i < count; i++) {
        // 關於sprite.clone方法文檔的介紹是，返回的是序列的實例，
        // 因此每一個實例對象均可以用這個方法控制
        var sp = sprite.clone();
        // 設置圖標出現位置
        sp.x = x;
        sp.y = y;
        // 利用隨機數控制圖標隨機亮度
        sp.alpha = Math.random() * 0.5 + 0.5;
        // 設置大小
        sp.scaleX = sp.scaleY = Math.random() + 0.3;

        // 設置曲線
        var a = Math.PI * 2 * Math.random();

        //設置速度
        var v = (Math.random() - 0.5) * 30 * speed;
        sp.vX = Math.cos(a) * v;
        sp.vY = Math.sin(a) * v;
        sp.vS = (Math.random() - 0.5) * 0.2; // scale
        sp.vA = -Math.random() * 0.05 - 0.01;// alpha
        stage.addChild(sp);
    }
}

3.運行效果：

4.源碼下載：

https://github.com/toutouge/WebProject/tree/master/FirstEaselJSCanvas

v博客總結

對於HTML5優秀的JS類庫或者是引擎框架還有不少，若是你有什麼好的能夠拿出來分享一下。

做　　者：請叫我頭頭哥
出　　處：http://www.cnblogs.com/toutou/
關於做者：專一於基礎平臺的項目開發。若有問題或建議，請多多賜教！
版權聲明：本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。
特此聲明：全部評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：若是您以爲文章對您有幫助，能夠點擊文章右下角【推薦】一下。您的鼓勵是做者堅持原創和持續寫做的最大動力！