빠른 시작 createjs 예제 튜토리얼

PHP中文网
풀어 주다: 2017-06-21 10:33:14
원래의
3747명이 탐색했습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!