빠른 시작 createjs 예제 튜토리얼

createjs 프레임워크를 사용하기 시작했을 때 아직 인터넷에 관련된 튜토리얼이 거의 없다는 것을 알았기 때문에 나중에 쉽게 참고할 수 있도록 글을 작성했습니다.

createjs 소개

공식 웹사이트: http://www.createjs.cc/

createjs는 다음 네 부분으로 구성됩니다.

EaselJS: 스프라이트, 애니메이션, 벡터 및 비트맵을 그리는 데 사용됩니다. HTML5 Canvas에서 대화형 경험 생성(멀티 터치 포함)

TweenJS: 애니메이션 효과에 사용

SoundJS: 오디오 재생 엔진

PreloadJS: 웹 사이트 리소스 사전 로드

SoundJS, PreloadJS와 유사(더 많은 경우) 직접 처리하는 것이 편리하므로 직접 작성할 수도 있습니다. 일반적으로 이는 선택 사항이든 아니든 보조 기능과 동일합니다. 따라서 이 글에서는 주로 EaselJS의 사용법을 설명합니다.

1. EaselJS의 일반 API

• (Bitmap)을 사용하여 그림을 그립니다.

• (Shape)을 사용하여 직사각형, 원 등의 그래픽을 그립니다. x, y 좌표 변경, 그림자 증가, 투명도 알파, 배율 축소 및 확대

2 EaselJS 그리기의 일반적인 프로세스

일반 프로세스:

표시 개체 만들기 → 일부 매개변수 설정 → 메소드를 호출하여 그리기 → 스테이지에 추가 → update()

, 코드는 다음과 같습니다:

<script src="easeljs-0.7.1.min.js?1.1.10"></script>  //引入相关的js文件
<canvas id="canvas"></canvas> canvas = document.querySelector('#canvas' stage =  rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();

그래픽은 일부 스타일, 선 너비, 색상 등을 설정할 수 있으며 일부 메소드를 호출하여 직사각형 drawRect, 원형 drawCircle 등과 같은 그래픽을 그립니다. 자세한 내용은 API를 직접 확인할 수 있습니다.

참고: 스테이지에 모양 개체를 추가하는 것을 잊지 마세요. 그렇지 않으면 화면에 표시되지 않습니다. TICKER TIMERALES CreateJS를 작성할 때 확실히 겪을 것입니다

4. 여러 표시 개체의 계층적 관계를 제어합니다. 이전 항목을 재정의하여 표시 목록 끝에 addChild 메서드를 추가합니다.

어린이의 계단식 효과를 동적으로 변경할 수도 있습니다.

createjs.Ticker.setFPS(60);

5. 컨테이너 컨테이너

통합 관리를 위해 컨테이너에 포함된 Text, Bitmap, Shape, Sprite 및 기타 EaselJS 요소를 포함할 수 있습니다. 예를 들어 캐릭터는 손, 발, 머리, 몸통으로 구성되어 있으며 이러한 부분을 동일한 컨테이너에 넣고 균일하게 움직일 수 있습니다. 사용 방법도 비교적 간단합니다.

stage.setChildIndex(red,1);

謬謬謬~이 글의 초점은 이미지를 그리고 처리하는 것입니다.

6 그림 그리기

var contain = new createjs.Container(); 
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

위의 내용을 따르십시오. EaselJS의 일반적인 그리기 과정에서는 위의 코드가 정상적으로 표시되어야 합니다. 그러나 일부 경우에만 정상적으로 표시될 수 있습니다. 이 이미지 리소스가 성공적으로 로드되었는지 확인해야 새 이미지가 생성될 수 있습니다. 그렇지 않으면 리소스가 미리 로드되어 있는 경우 사용할 수 있습니다. 그렇지 않은 경우에는 이미지가 로드된 후에 그려야 합니다.

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

단순히 그림을 그리는 것만으로는 충분하지 않습니다. Createjs는 그림을 처리하는 여러 가지 방법을 제공합니다. 사진에

마스크 속성을 사용하면 이미지와 모양이 교차하는 영역만 표시할 수 있습니다

var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () { var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

일반적인 적용 시나리오: 원형 이미지 표시 등 이미지를 자르는 데 사용됩니다.

6.2 이미지에 필터 효과 추가

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;//遮罩图形shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩stage.addChild(shape);
stage.addChild(bg);
stage.update();

사진이 여전히 흐려지지 않은 것을 발견했습니다. 그 이유는 사진에 필터를 추가한 후 즉시 스테이지가 새로 고쳐지기 때문입니다. 필터는 효과만 유지할 수 있습니다. 한 프레임에서 필터가 실패하고 두 번째 프레임에서 필터가 실패합니다. 이미지의 캐시() 메서드를 사용한 후에는 스테이지가 어떻게 새로 고쳐지더라도 필터 효과가 유지될 수 있습니다. 캐시를 추가하면 FPS 향상, 캐싱 등 많은 기능이 있습니다.

var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];

6.3 Rectangle 사용 이미지 자르기

EaselJS에 내장된 Rectangle 객체를 사용하여 이미지의 특정 부분을 표시하는 선택 상자를 만듭니다.

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

适用场景：拼图小游戏，剪裁图片……

 

7. createjs事件

easeljs事件默认是不支持touch设备的，需要以下代码才支持：

createjs.Touch.enable(stage);

对于Bitmap，Shape等对象，都可以直接使用addEventListener进行事件监听

bitmap = new createjs.Bitmap('');
bitmap.addEventListener（‘click’，handle）;

 

8. CreateJs的渲染模式

CreateJs提供了两种渲染模式，一种是用setTimeout，一种是用requestAnimationFrame，默认是setTimeout，默认的帧数是20，一般的话还没啥，但是如果动画多的话，设置成requestAnimationFrame模式的话，就会感觉到动画如丝般的流畅。

 

 

9.适配

在移动端开发中，不得不面对一个多屏幕，多尺寸的问题，所以适配问题显得特别重要。

<canvas id="game" width="1000" height="700"></canvas>

注意，以上代码的width，height不同于css中的width，height。

比如，你在canvas内部绘制图片，用x，y轴进行定位，这里的x，y是相对于canvas这个整体。

我们再把canvas当成一整张图片使用css进行适配

canvas{
     width: 100%;
}

那么，就会有以下的效果，canvas会适配屏幕尺寸，里面的图片也会等比例变大变小。

     

 

 

위 내용은 빠른 시작 createjs 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!