来自 计算机前端 2019-10-22 05:46 的文章
当前位置: 美高梅4858官方网站 > 计算机前端 > 正文

Createjs学习笔记1,Html5游戏框架createJS组件

CreateJS介绍请看CreateJS中文网或者官方网站

Html5游戏框架createJS组件--EaselJS,html5createjs

CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。

掌握了CreateJS可以更方便的完成HTML5的游戏开发。

CreateJS提供了EaselJS、TweenJS、SoundJS和PreLoadJS四款工具:

EaselJS:简化处理HTML5画布
TweenJS:用来帮助调整HTML5和Javascript属性
SoundJS:用来简化处理HTML5 audio
PreLoadJS:帮助管理和协调加载中的一些资源

 可以在官网的下载页面进行下载JS文件,或者使用直接官方的CDN 链接

 

EaselJS 库给画布提供了保留图形模式,其中包括一个完整的分层显示列表、一个核心的交互模型以及一个让2D图形在画布上更容易实现的助手类。

 

开始

最开始我们需要创建一个Stage对象来包装一个画布(Canvas)元素,并且添加一个DisplayObject对象实例作为子类。EaselJS支持:

* 使用 Bitmap 创建图像

* 使用 Shape 和  Graphics 创建矢量图形

* 使用 SpriteSheet 和 Sprite 创建动态的位图

* 使用 Text 创建简单的文本

* 使用 Container 创建保存其他显示对象的容器

所有的显示对象都可以作为子类被添加到舞台(stage)上,或者直接在画布(canvas)上绘制出来。

 

用户交互

当使用鼠标或者触摸交互时,除了DOM 元素,所有的显示对象都可以调度事件。EaselJS 支持悬停、按压、释放事件,以及一个容易使用的拖放模块。点击 MouseEvent 可以获得更多信息。

 

实例

1. 使用 Bitmap 创建图像

首先,我们需要引用 EaselJS 文件:

<script src="js/easeljs-0.8.2.min.js"></script>

接着,我们需要在HTML文档中创建一个 canvas 元素:

<canvas id="imageView" width="560" height="410">您的浏览器版本过低,请更换更高版本的浏览器</canvas>

然后,我就可以在 Javascript 代码中创建图像:

// 通过画布ID 创建一个 Stage 实例
var stage = new createjs.Stage("imageView");
// 创建一个 Bitmap 实例
var theBitmap = new createjs.Bitmap("imgs/testImg.jpg");
// 设置画布大小等于图片实际大小
stage.canvas.width = theBitmap.image.naturalWidth;
stage.canvas.height = theBitmap.image.naturalHeight;
// 把Bitmap 实例添加到 stage 的显示列表中
stage.addChild(theBitmap);
// 更新 stage 渲染画面
stage.update();

这样,图像就创建成功了,源码见 easeljs-image.html 。

 

2.使用 Shape 和  Graphics 创建矢量图形

和上面一样,我们需要添加对 EaselJS的引用以及在HTML文档中,创建canvas元素。然后就是我们自定义的js文件代码:

//Create a stage by getting a reference to the canvas
var stage = new createjs.Stage("circleView");
//Create a Shape DisplayObject.
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40);
//Set position of Shape instance.
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
stage.addChild(circle);
//Update stage will render next frame
stage.update();

这样我们就创建了一个深天蓝色,圆心为(50.50),半径为40像素的圆形(源码见 easeljs-shape-circle.html):

美高梅4858官方网站 1

渲染前的画布如下(宽高为100像素):

美高梅4858官方网站 2

 

我们还可以添加简单的交互事件:

stage.addEventListener("click",handleClick);
function handleClick() {
    // Click happened;
    console.log("The mouse is clicked.");
}
stage.addEventListener("mousedown",handlePress);
function handlePress() {
    // A mouse press happened.
    // Listen for mouse move while the mouse is down:
    console.log("The mouse is pressed.");
    stage.addEventListener("mousemove",handleMove);
}
function handleMove() {
    // Check out the DragAndDrop example in GitHub for more
    console.log("The mouse is moved.");
}

当我们点击圆的事件,控制台会显示:

The mouse is pressed.
The mouse is clicked.

 

我们还可以通过 tick 事件进行图形的移动等动画效果(源码见 easeljs-shape-circle-move.js):

// Update stage will render next frame
createjs.Ticker.addEventListener("tick",handleTick);
//添加一个Ticker类帮助避免多次调用update方法
function handleTick() {
    var maxX =  stage.canvas.width - 50;
    var maxY =  stage.canvas.height - 50;
    //Will cause the circle to wrap back
    if(circle.x < maxX && circle.y == 50){
        // Circle will move 10 units to the right.
        circle.x +=10;
    }else if(circle.x == maxX && circle.y <maxY){
        circle.y +=10;
    }else if(circle.x > 50 && circle.y == maxY){
        circle.x -=10;
    }else if(circle.x<= 50){
        circle.y -=10;
    }
    stage.update();
}

效果:

美高梅4858官方网站 3

 

3.使用 SpriteSheet 和 Sprite 创建动态的位图

 同样,先对 EaselJS 进行引用,然后创建 canvas HTML元素:

<canvas id="view" width="80" height="80"></canvas>

需要使用到的图片:

美高梅4858官方网站 4

接下来在 JS 文件中对资源进行引用加载:

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {
    // 源图像的数组。图像可以是一个html image实例,或URI图片。前者是建议控制堆载预压
    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
    // 定义单个帧。有两个支持格式的帧数据:当所有的帧大小是一样的(在一个网格), 使用对象的width, height, regX, regY 统计特性。
    // width & height 所需和指定的帧的尺寸
    // regX & regY 指示帧的注册点或“原点”
    // spacing 表示帧之间的间隔
    // margin 指定图像边缘的边缘
    // count 允许您指定在spritesheet帧的总数;如果省略,这将根据源图像的尺寸和结构计算。帧将被分配的指标,根据他们的位置在源图像(左至右,顶部至底部)。
    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
    // 一个定义序列的帧的对象,以发挥命名动画。每个属性对应一个同名动画。
    // 每个动画必须指定播放的帧,还可以包括相关的播放速度(如2 将播放速度的两倍,0.5半)和下一个动画序列的名称。
    animations:{
        run:[0,3]
    }
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run")

container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5); //设置帧
createjs.Ticker.addEventListener("tick",stage);
stage.update();

这样,简单走路的效果就出来了(源码见 easeljs-sprite-01.html):

美高梅4858官方网站 5

 

如果想通过按钮控制动画的变换的话使用 gotoAndPlay(action) 方法调用对应的动画效果就行了。

我们修改HTML文档代码如下:

<canvas id="view" width="80" height="80"></canvas>
<div class="buttons">
    <input id="goStraight" value="Go Straight" type="button" />
    <input id="goLeft" value="Go Left"  type="button"/>
    <input id="goRight" value="Go Right"  type="button"/>
    <input id="goBack" value="Go Back"  type="button"/>
</div>

然后修改JS代码如下:

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {
    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
    animations:{
        stand:0,
        run1:[0,3],
        run2:[4,7],
        run3:[8,11],
        run4:[12,15]
    }
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run1")

container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5);
createjs.Ticker.addEventListener("tick",stage);
stage.update();

document.getElementById('goStraight').onclick =  function goStraight() {
    instance.gotoAndPlay("run1");
}
document.getElementById('goLeft').onclick =  function goLeft() {
    instance.gotoAndPlay("run2");
}
document.getElementById('goRight').onclick =  function goRight() {
    instance.gotoAndPlay("run3");
}
document.getElementById('goBack').onclick =  function goBack() {
    instance.gotoAndPlay("run4");
}

效果就出来了(源码见 easeljs-sprite-02.html):

美高梅4858官方网站 6

 

4.使用 Text 创建简单的文本

这个就比较简单了,直接看代码:

<canvas id="View" width="300" height="80"></canvas>
<script>
    var stage = new createjs.Stage("View");
    var theText = new createjs.Text("Hello,EaselJS!","normal 32px microsoft yahei","#222222");
    stage.addChild(theText);
    stage.update();
</script>

这里有设置背景色为粉红:

#View { background-color: #fddfdf;}

显示效果为:

美高梅4858官方网站 7

 

5.使用 Container 创建保存其他显示对象的容器

其实这个在前面已经用过了。不过还是单独写个例子,这个比较简单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 Container 创建保存其他显示对象的容器</title>
    <script src="js/base/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="view" width="300" height="300"></canvas>
<script>
    var stage = new createjs.Stage("view");
    container = new createjs.Container();
    //先来绘制个正方形
    var square = new createjs.Shape();
    square.graphics.beginFill("#ff0000").drawRect(0,0,300,300);
    container.addChild(square);
    //先来绘制个正方形
    var square2 = new createjs.Shape();
    square2.graphics.beginFill("orange").drawRect(50,50,200,200);
    container.addChild(square2);
    //然后我们来绘制个圆形
    var circle = new createjs.Shape();
    circle.graphics.beginFill("blue").drawCircle(150,150,100);
    container.addChild(circle);
    //最后我们再绘制个圆形
    var circle2 = new createjs.Shape();
    circle2.graphics.beginFill("white").drawCircle(150,150,50);
    container.addChild(circle2);

    stage.addChild(container);
    stage.update();
</script>
</body>
</html>

效果如下:

美高梅4858官方网站 8

 

相关源码地址:Demo4CreateJS

CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨...

一.使用EaselJS

先到官网下载easeljs,也可以点这里

1.得到easeljs-0.8.1.min.js后,新建一个HTML5文件并导入:

<script src="easeljs-0.8.1.min.js"></script> 

2.入口函数和创建canvas标签:

<body onload="init();">
    <canvas id="game" width="1000" height="700" style="background-color: white"></canvas>
</body>

3.创建舞台:

 <script>
    function init(){
        var stage = new createjs.Stage("game");
        //.......
        stage.update();

    }
</script>

二.使用EaselJS创建图形和文字

1.添加文字

var txt = new createjs.Text("HELLO","20px Times","#000");
txt.x = 100;  
txt.y = 100;  
txt.text = "hello, world!" ;

这里先创建了文字,然后又在创建后修改了文字位置,以及内容。

最后一定要把新创建的文字加入到舞台中,不然无法显示:

stage.addChild(txt); 

2.添加图形

图形包括代码绘制的适量图(如一个圆,一个矩形)和png、jpg等格式的图片

这里先说代码绘制的适量图,图片后面再学习:

var shape = new createjs.Shape();
shape.graphics.beginStroke("#000").beginFill("#ff0000").drawRect(0, 0, 100, 100);

可以查看美高梅4858官方网站,API修改shape的位置、大小、透明度、旋转、锚点等属性。

本文由美高梅4858官方网站发布于计算机前端,转载请注明出处:Createjs学习笔记1,Html5游戏框架createJS组件

关键词: