sprite wxapp
v1.0.0
これは spritejs の WeChat アプレット バージョンであり、現在 spritejs v 2.0 のほとんどの機能をサポートしています。詳細については、ヘルプ ドキュメントを参照してください。
スプライト プロパティの自動更新 (バッチ) 再描画
デフォルトの単位として rpx を使用する
アニメーションのサポート Web アニメーション 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-シーン> </ビュー>
パラメータ レイヤーは、作成するレイヤーの数とその ID を示します。デフォルトは、default です。
bindingSceneCreated はシーン作成後のコールバック イベントで、作成されたレイヤーはイベント メソッドで返されます。
const { スプライト } = require('@spritejs/wxapp');Page({
onSceneCreated({ 詳細: レイヤー }) {const { bglayer, fglayer } = レイヤー;const s = new Sprite({ size: [100, 100], pos: [300, 300], bgcolor: 'red',}); fglayer.append(s);const s2 = new Sprite({ size: [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', 'red');});
},});コンポーネントを使用したくない場合は、自分でキャンバスを作成してからシーンを構築することもできます。
<view class="scene-layout" id="container" catchtouchmove="noop">
<ブロック wx:for="{{レイヤー}}" wx:key="{{item}}">
<canvas Canvas-id="{{item}}" disable-scroll="true"></canvas>
</ブロック>
</ビュー> const spritejs = require('@spritejs/wxapp');Page({
データ: {レイヤー: ['fglayer']、eventOffset: [0, 0]、
}、
onTouchStart(event) {// タッチスタート イベントをディスパッチします this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
}、
onReady: function() {// プロキシ イベントのシーン レイアウトはウィンドウに対して相対的にオフセットされる可能性があるため、イベント座標を正しく配置するには // このオフセットを渡す必要があります const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({eventOffset: [rect.left, rect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;constlayer = scene.layer('fglayer');// リソースをプリロード scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);constbird = new spritejs.Sprite('bird1.png');bird.attr({アンカー: [0.5, 0.5], pos: [100, 200],});//オンタッチイベントを追加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: posFrom}, {pos: posTo},], {duration: 2000}) // 2 つのスプライトをlayerlayer.append (bird,文章）;
},})自分で呼び出す場合は、キャンバスの作成時に作成したレイヤーの ID と一致するように Canvas-id 属性を設定する必要があることに注意してください。
Web/ノード版とは異なり、ミニプログラム版の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">
<ブロック wx:for="{{レイヤー}}" wx:key="{{item}}">
<canvas Canvas-id="{{item}}" bindingtouchstart="touched"></canvas>
</ブロック>
</ビュー> const spritejs = require('@spritejs/wxapp')Page({
データ: {レイヤー: ['fglayer']、eventOffset: [0, 0]、
}、
タッチ: function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
}、
onReady: function() {// プロキシ イベントのシーン レイアウトはウィンドウに対して相対的にオフセットされる可能性があるため、イベント座標を正しく配置するには // このオフセットを渡す必要があります const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({eventOffset: [rect.left, ect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;constlayer = scene.layer('fglayer');// カスタム コンポーネントで使用する場合は、Pass 2 番目のパラメータはコンポーネント インスタンスへの参照です。 // constlayer = scene.layer('fglayer', this)
... },})WeChat は要素の動的な作成をサポートしていないため、最初にテンプレート内にキャンバスを作成し、対応するキャンバス ID に割り当てる必要があります。
現在、リモート URL の読み込みはサポートされておらず、ローカルの画像マテリアルのみをサポートしています。さらに、スプライトの Web/ノード バージョンは画像をプリロードして画像の幅と高さを取得できるため、スプライトはデフォルトで幅と高さに適応できます。一方、WeChat アプレット バージョンでは、イメージのパッケージ化にテクスチャパッカーを使用しません。そうしないと、デフォルトの幅と高さを取得できないため、スプライト オブジェクトを表示する前に幅と高さを指定する必要があります。
また、scene.preload がフレーム リソースをプリロードする場合、json ファイルからの FrameData の読み込みはサポートされていないことに注意してください。frameData を js として保存し、アプリで要求できます。
また、テクスチャ パッカーの回転およびトリミング機能は現在サポートされていません。
// WeChat アプレット バージョンの scene.preload は同期です scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = 新しいスプライト('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フォルダーに配置しました。
サンプルコードをデバッグするには、Webpack コンパイルを開始します。
npmスタート
次に、WeChat 開発者ツールを使用してコードをデバッグします。
WeChat は Dom 要素の動的作成をサポートしておらず、d3 と互換性がありません。現在、d3 の機能はサポートされていません (将来的には shim を通じて対応される予定です)。
WeChat コンテキストはフィルターをサポートしていないため、フィルターは効果がありません。
WeChat キャンバスはグラデーション (linearGradients および createRadialGradient) をサポートしていません。attr で gradient 属性を使用すると、エラーが発生します。
WeChat のキャンバスはコンテキストの動的な作成をサポートしていないため、キャッシュの最適化は使用できません。
WeChatのシミュレーターのクリッピングに問題があるため、シミュレーター下のスプライト要素のクリッピング領域が正しくない可能性があります。
WeChat のキャンバスの globalAlpha にはセッターのみがあり、ゲッターはありません。そのため、ミニ プログラムが不透明度属性を設定すると、子要素の不透明度が親コンテナの不透明度値を上書きすることはできません。
