HTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト)

黄舟
リリース: 2017-03-21 14:57:05
オリジナル
3322 人が閲覧しました


CreateJSHTML5ゲーム用に開発されたエンジンとも言えるCreateJSライブラリです。 HTML5 ゲームを構築し、新しいゲームを構築し、最新の HTML5 を構築するためのテクノロジーを提供します。この Web サイトを通じて、クロスプラットフォームおよびクロスターミナルのゲームを構築する方法を学ぶことができます。このリソース ライブラリでは、マルチプレイヤー オンライン ゲームを構築する方法も示します。 CreateJS は、豊富なインタラクティブ エクスペリエンスを備えた HTML5 ゲームを構築できるオープン ソース ツールキットで、HTML5 プロジェクトの開発の難しさとコストを軽減し、開発者が使い慣れた方法でより最新のネットワーク インタラクティブ エクスペリエンスを作成できるようにすることを目的としています。

1. createjs ホームページに入ります:

ホームページには、EASEJS、TweenJS、SoundJS、PrloadJS、ZOE などのいくつかのタブ ページがあります (最新の公式 Web サイトには、 ZOE タブ ページ)

  • EASEJS: HTML5 キャンバスの処理に使用されます

  • TWEENJS: HTML5 アニメーション調整と JavaScript 属性の処理に使用されます

  • SOUNDJS: オーディオ関連 API の処理を​​簡素化するために使用されます

  • PRELOADJS: コーディネーター アドオンの管理およびクラス ライブラリ

  • ZOE: SWF アニメーションを EaseIJS スプライトにエクスポートするツール

これらのライブラリに基づいて、HTML5 ベースのゲーム、アニメーション、およびインタラクティブ アプリケーションを非常に迅速に開発できます。動作環境はSafari、Chrome、Firefox、IE9以降をご利用ください。 HTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト)

2. ホームページ分析:

このブログは主にHTML5ゲーム開発用のキャンバスエンジンを紹介しているので、そのままダウンロードできます。 EASEJS 。

4. ヘルプ ドキュメント: HTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト)

ヘルプ ドキュメントには、多くのクラスの紹介と、対応するクラスのメソッド、プロパティ、イベントの紹介が含まれています。しかし、それは英語であり、私はまだそれより良い中国語版を見つけていません。 ps:英語が苦手な場合はWebツールを使って無理やり翻訳するしかありません。特定の Web ツールの翻訳方法については、私の以前のブログを参照してください: Google/Microsoft/Bing Web ページ無料翻訳プラグイン

HTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト) 5. メイン JS を導入します:

このファイルは、必要なものです。 jsファイルを導入します。 v

簡単なデモ

HTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト)

1.html コード:

<!DOCTYPE html>
<html xmlns=" 
<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 コード:

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特殊効果

HTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト)

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. 実行中のエフェクト:

HTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト)

以上がHTML5 ゲーム開発エンジン - 初めての CreateJS の詳細な紹介 (写真とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート