HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)

黄舟

Mar 21, 2017 pm 02:57 PM

CreateJS is the CreateJS library, which can be said to be an engine developed for HTML5 games. Build HTML5 games, build new games, and provide technology for building the latest HTML5. You can learn how to build cross-platform and cross-terminal games through this website. This resource library also shows you how to build multiplayer online games. CreateJS is an open source toolkit that can build HTML5 games with rich interactive experiences. It aims to reduce the development difficulty and cost of HTML5 projects and allow developers to create more modern network interactive experiences in a familiar way.

1. Enter the createjs homepage:

There are several tab pages on the homepage, including EASEJS and TweenJS , SoundJS, PrloadJS, and ZOE. (The latest official website seems to have no tab page for ZOE)

EASEJS: used to process HTML5 canvas
TWEENJS: Used to handle HTML5 animation adjustments and javascript attributes
SOUNDJS: Used to help simplify the processing of audio-related APIs
PRELOADJS: A class library for managing and coordinating program add-ons
ZOE: A tool for exporting SWF animations as sprites for EaseIJS

Based on these libraries , you can quickly develop games, animations and interactive applications based on HTML5. Please use Safari, Chrome, Firefox or IE 9+ for the running environment. HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)

2. Home page analysis:

3. Enter Download page

HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)
Because this blog mainly introduces canvas, the engine for HTML5 game development, so we can just download EASEJS.

4. Help document:

HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)
The help document contains introductions to many classes, as well as methods of corresponding classes. , attributes, Introduction to events. But it’s in English, and I haven’t found a better Chinese version yet. ps: If your English is poor, you can only use web tools to translate it forcefully. For specific web tool translation methods, please see my previous blog: Google/Microsoft/Bing web page free translation plug-in

5. Introduce main JS:

HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)
This file is the js file we need to import.

vSimple demo

1.html code:

<!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 code:

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. Running effect:

HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)

vMouse over special effects

1.html code:

<!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 Code:

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. Running effect:

HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text)

The above is the detailed content of HTML5 game development engine-detailed introduction to CreateJS for the first time (pictures and text). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。