sprite wxapp

spritejs WeChat 애플릿 버전

이는 spritejs의 WeChat 애플릿 버전입니다. 현재 spritejs v 2.0의 대부분의 기능을 지원합니다. 자세한 내용은 도움말 문서를 참조하세요.

특성

• 스프라이트 속성 업데이트가 자동으로(일괄적으로) 다시 그려집니다.

• rpx를 기본 단위로 사용

• 애니메이션 지원 웹 애니메이션 API

• 지원 이벤트 메커니즘

빠른 사용

설치하다

버전 v1.10.0 이후 미니 프로그램 버전에서는 NPM 설치를 지원합니다.

 npm install @spritejs/wxapp --save

그런 다음 WeChat 애플릿에서 NPM 패키지를 빌드합니다.

구성요소를 통해 사용됨

설치 및 구축이 완료되면 SpriteJS를 사용하는 가장 쉬운 방법은 내장된 장면 구성 요소를 이용하는 것입니다.

미니 프로그램 구성 app.json에 구성 요소를 등록합니다.

 "usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}

그런 다음 사용하려는 페이지에 구성요소를 소개합니다.

 <보기>
<s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated"
></s-장면>
</view>

매개변수 레이어는 생성할 레이어 수와 해당 ID를 나타냅니다. 기본값은 기본값입니다.

BindSceneCreated는 Scene을 생성한 후의 콜백 이벤트이며, 생성된 레이어는 이벤트 메소드에 반환됩니다.

 const { Sprite } = require('@spritejs/wxapp');페이지({
onSceneCreated({ 세부정보: 레이어 }) {const { bglayer, fglayer } = 레이어;const s = new Sprite({ size: [100, 100], pos: [300, 300], bgcolor: 'red',}); fglayer.append(s);const s2 = new Sprite({ 크기: [300, 300], pos: [200, 200], bgcolor: 'blue',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'green');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'yellow');});s.on('touchend', () => { s.attr('bgcolor', '빨간색');});
},});

맞춤형 사용

구성 요소를 사용하지 않으려면 캔버스를 직접 만든 다음 장면을 구성할 수도 있습니다.

 <view class="scene-layout" id="container" catchtouchmove="noop">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" 비활성화-scroll="true"></canvas>
</block>
</view>

 const spritejs = require('@spritejs/wxapp');페이지({
데이터: {레이어: ['fglayer'], eventOffset: [0, 0],
},
onTouchStart(event) {// touchstart 이벤트 전달 this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// 프록시 이벤트의 장면 레이아웃은 창을 기준으로 오프셋될 수 있으므로 // 이벤트 좌표를 올바르게 배치하려면 이 오프셋을 전달해야 합니다. const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([ect]) => { if(ect) {this.setData({ eventOffset: [ect.left, ret.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const layer = scene.layer('fglayer');// 리소스 미리 로드 scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);const Bird = new spritejs.Sprite('bird1.png');bird.attr({ 앵커: [0.5, 0.5], pos: [100, 200],});//ontouch 이벤트 추가bird.on('touchstart', evt = > { console.log(evt)});// 텍스처 애니메이션 let i = 0 setInterval(() => { Bird.textures = [`bird${i++%3+1}.png`];}, 100);//텍스트 추가 const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0.5, 0.5], 글꼴: '44px Arial', 테두리: [2, 'red'],}); const posFrom = [0, 0]; [100, 0]; // 시프트 애니메이션 재생 text.animate([ {pos: posTo},], { Duration: 2000}) // layerlayer.append에 두 개의 스프라이트를 추가합니다(bird, 텍스트);
},})

참고 로 직접 호출할 경우 캔버스 생성 시 생성된 레이어의 ID와 일치하도록 canvas-id 속성을 설정해야 합니다.

미니 프로그램 버전과 원본 버전의 제한/차이점

장면 매개변수 차이점

웹/노드 버전과 다르게 미니 프로그램 버전의 Scene 생성자는 너비와 높이만 전달할 수 있으며 단위는 rpx입니다. rpx는 WeChat 미니 프로그램의 고유 단위입니다. 자세한 설명은 설명서를 참조하세요.

 const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433) // 단위는 rpx입니다.

이벤트 처리의 차이점

컴포넌트 로딩을 통해 사용하면 touchstart, touchend, touchmove, tap, longpress 등의 이벤트가 장면에 의해 자동으로 프록시되므로 해당 이벤트 처리 기능을 스프라이트 요소에 추가하여 이벤트를 정상적으로 트리거할 수 있습니다.

장면을 직접 생성하는 경우 이벤트를 수동으로 프록시해야 합니다.

 <!--index.wxml--><view class="scene-layout" id="container">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}"bindtouchstart="touched"></canvas>
</block>
</view>

 const spritejs = require('@spritejs/wxapp')페이지({
데이터: {레이어: ['fglayer'], eventOffset: [0, 0],
},
touched: function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady: function() {// 프록시 이벤트의 장면 레이아웃은 창을 기준으로 오프셋될 수 있으므로 // 이벤트 좌표를 올바르게 배치하려면 이 오프셋을 전달해야 합니다. const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([ect]) => { if(ect) {this.setData({ eventOffset: [ect.left, ret.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const layer = scene.layer('fglayer');// 사용자 정의 구성 요소에 사용되는 경우 Pass 두 번째 매개변수는 구성 요소 인스턴스에 대한 참조입니다. // const 레이어 = scene.layer('fglayer', this)
... },})

레이어의 캔버스 요소를 미리 생성해야 합니다.

WeChat은 요소의 동적 생성을 지원하지 않으므로 먼저 템플릿에서 캔버스를 생성하고 해당 캔버스 ID에 할당해야 합니다.

Sprite 이미지 지원의 리소스 사전 로드 및 제한 사항

현재는 원격 URL 로드를 지원하지 않으며 로컬 이미지 자료만 지원합니다. 또한 Sprite의 웹/노드 버전은 이미지를 미리 로드하고 이미지 너비와 높이를 얻을 수 있으므로 스프라이트는 기본적으로 너비와 높이에 적응할 수 있습니다. , WeChat 애플릿 버전은 이미지 패키징에 텍스처패커를 사용하지 않습니다. 그렇지 않으면 기본 너비와 높이를 얻을 수 없으며 스프라이트 객체를 표시하기 전에 너비와 높이를 지정해야 합니다.

또한 scene.preload가 프레임 리소스를 미리 로드하는 경우 json 파일에서 프레임 데이터를 로드하는 것은 지원되지 않습니다. 이는 js 객체여야 합니다.

또한, 텍스처 패커의 회전 및 트리밍 기능은 현재 지원되지 않습니다.

 // WeChat 애플릿 버전의 scene.preload는 동기식입니다. scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js') )])const sprite1 = 새로운 Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// 프레임에서 로드된 이미지는 기본 크기를 가지며 정상적으로 표시될 수 있습니다. scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
위치: [50, 50],
size: [100, 100], // 프레임이 아닌 이미지는 너비와 높이를 지정해야 합니다.}) scene.layer().append(sprite2)

샘플 코드 디버깅

app 폴더에 "물방울 10개" 미니게임의 예시를 넣어두었습니다.

예제 코드를 디버그하려면 webpack 컴파일을 시작하면 됩니다.

 npm 시작

그런 다음 WeChat 개발자 도구를 사용하여 코드를 디버깅합니다.

현재 지원되지 않는 기능

• WeChat은 Dom 요소의 동적 생성을 지원하지 않으며 d3와 호환되지 않습니다. 현재 d3의 기능은 지원되지 않습니다(향후 shim을 통해 적응될 예정).

• WeChat 컨텍스트는 필터를 지원하지 않으므로 필터는 효과가 없습니다.

• WeChat 캔버스는 그라디언트(linearGradients 및 createRadialGradient)를 지원하지 않습니다. attr에 그라디언트 속성을 사용하면 오류가 발생합니다.

• WeChat의 캔버스는 동적 컨텍스트 생성을 지원하지 않으므로 캐싱 최적화를 사용할 수 없습니다.

현재 해결되지 않는 버그

• WeChat 시뮬레이터의 클리핑에 문제가 있기 때문에 시뮬레이터 아래의 스프라이트 요소의 클리핑 영역이 정확하지 않을 수 있습니다.

• WeChat 캔버스의 globalAlpha에는 setter만 있고 getter는 없습니다. 따라서 미니 프로그램이 불투명도 속성을 설정하면 하위 요소의 불투명도가 상위 컨테이너의 불투명도 값을 덮어쓰게 됩니다.