Html5 게임 프레임워크 createJS 컴포넌트 - EaselJS 상세 설명-H5 튜토리얼-php.cn

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는 다음을 지원합니다:

* 비트맵을 사용하여 이미지 생성

* 모양 및 그래픽을 사용하여 벡터 그래픽 생성

* SpriteSheet 및 Sprite를 사용하여 동적 비트맵 생성

* 텍스트를 사용하여 간단한 텍스트 만들기

* 컨테이너를 사용하여 다른 표시 개체에 대한 컨테이너 만들기

모든 표시 개체는 스테이지에 하위 클래스로 추가하거나 스테이지에 직접 추가할 수 있습니다. 캔버스에 그려짐 .

사용자 상호 작용

마우스 또는 터치와 상호 작용할 때 DOM 요소를 제외한 모든 표시 객체는 이벤트를 전달할 수 있습니다. EaselJS는 호버, 누르기, 놓기 이벤트는 물론 사용하기 쉬운 드래그 앤 드롭 모듈도 지원합니다. 자세한 내용을 보려면 MouseEvent를 클릭하세요.

인스턴스

1. 비트맵을 사용하여 생성합니다. 이미지

먼저 EaselJS 파일을 참조해야 합니다.

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

로그인 후 복사

다음으로 HTML 문서에서 캔버스 요소를 만들어야 합니다.

<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();

로그인 후 복사

이렇게 하면 이미지가 성공적으로 생성됩니다. easyljs-image.html 소스 코드를 참조하세요.

2. 모양과 그래픽을 사용하여 벡터 그래픽을 만듭니다.

위와 동일합니다. EaselJS에 대한 참조를 추가하고 HTML 문서에 캔버스 요소를 생성해야 합니다. 그런 다음 사용자 정의된 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픽셀인 어두운 하늘색 원을 만듭니다(자세한 내용은 easyljs-shape-circle.html 참조). 소스 코드 ):

렌더링 전 캔버스는 다음과 같습니다(너비와 높이가 100픽셀):

간단한 상호작용 이벤트를 추가할 수도 있습니다:

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.

로그인 후 복사

또한 틱 이벤트를 사용하여 그래픽과 같은 애니메이션 효과를 수행할 수도 있습니다. 움직임(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();
}

로그인 후 복사

효과:

3 . SpriteSheet 및 Sprite를 사용하여 동적 비트맵을 만듭니다.

마찬가지로 먼저 EaselJS를 참조하고, 그런 다음 캔버스 HTML 요소 를 만듭니다.

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

로그인 후 복사

사용할 사진:

다음 , 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 참조). 소스 코드):

버튼을 통해 애니메이션 변환을 제어하려면 gotoAndPlay(action) 메서드를 사용하면 됩니다. 해당 애니메이션 효과를 호출합니다.

HTML 문서 코드를 다음과 같이 수정합니다.

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

로그인 후 복사

그런 다음 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(&#39;goStraight&#39;).onclick =  function goStraight() {
    instance.gotoAndPlay("run1");
}
document.getElementById(&#39;goLeft&#39;).onclick =  function goLeft() {
    instance.gotoAndPlay("run2");
}
document.getElementById(&#39;goRight&#39;).onclick =  function goRight() {
    instance.gotoAndPlay("run3");
}
document.getElementById(&#39;goBack&#39;).onclick =  function goBack() {
    instance.gotoAndPlay("run4");
}

로그인 후 복사

效果就出来了（源码见 easeljs-sprite-02.html）：

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

로그인 후 복사

显示效果为：

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>

로그인 후 복사

效果如下：