Javascriptのpixiフレームワークに関する予備研究

pixi.js

レンダラーを作成します

(canvas) に相当する、アニメーションを再生できる領域を作成します。canvas).

//v4.4.2之前的旧写法
//创建  
var renderer = PIXI.autoDetectRenderer(w, h, {  
    backgroundColor: 0x1099bb,  
    transparent: true //背景是否设为透明   
});  

document.body.appendChild(renderer.view);  
//舞台添加显示对象sprite及每次渲染的监听函数  

var stage = new PIXI.Container();  
stage.addChild(sprite);  
animate();  
function animate() {  
    renderer.render(stage);  
    requestAnimationFrame(animate);  
}  

//v4.4.2之后的新写法
//创建  
var app = new PIXI.Application(w, h, {  
    backgroundColor: 0x1099bb,   
    transparent: false //背景是否设为透明   
});

//添加显示对象sprite及每次渲染的监听函数  

app.stage.addChild(sprite);  
app.ticker.add(function(delta) {});  
document.body.appendChild(app.view);

除了autoDetectRenderer接口，还有 CanvasRenderer 和 WebGLRenderer 接口，
autoDetectRenderer 可以根据客户端对 WebGL 的支持自动创建 WebGL 或 Canvas renderer。

创建舞台(stage)

舞台相当于一个容器(Container),添加元素后由渲染器(renderer)渲染舞台。相当于一个顶级的容器。

在 pixi.js 中有个 Container() 类，这个类就是一个容器。

var stage = new PIXI.Container();

添加舞台之后可以由渲染器(renderer)渲染。
renderer.render(stage);
// 舞台(stage)搭建完成后渲染出来。。      ***最后

创建材质集

动画中最重要的元素是图片（材质），这一类特殊的图片对象在pixi.js中称为精灵（sprite）,
通过控制sprite的大小，位置及一些其他的属性，可以达到动画的效果。

在pixi中有一个sprite类，可以根据外部的图片（材质）来创建一个可以在pixi中使用的sprite对象。

有三种方式创建：

• 从某个单独的图片创建

• 从整个材质图片创建，根据材质上不同的位置和大小截取某部分来创建sprite

• 从材质集中创建

  材质集是一个json文件，定义了某个材质图片里面图片的位置和大小等等，这样做的好处是不用
  每次创建sprite都要定义位置和大小，另外一方面修改了材质图片的时候不用修改代码.
  

根据材质集加载图片

在 pixi 中有一个 loader 类来管理图片的加载，并且在加载完成后调用回调函数处理。

PIXI.loader
    .add("images/treasureHunter.json")
    .load(setup);

treasureHunter.json 是材质集的配置文件，setup 是在完成图片加载后调用的回调函数。
PIXI.loader 在加载完成后可以通过 PIXI.loader.resources 来获取加载的图片。

回调函数

在完成图片加载后，PIXI.loader 会自动调用 setup 函数来进行下一步的处理。我们先定义
一个测试方法，看看是否跟预期一样。

function setup() {
    console.log("加载完成.");
}
// 测试可以的话就可以，删除setup里面的东西，然后完善舞台。

创建场景(gameScene)

游戏一般要创建两个场景，一个是用来显示正常游戏画面(gameScene)，一个是用来显示游戏结果(gameOverScene)。

var gameScene;

function setup() {
    gameScene = new PIXI.Container();
}

在容器中要添加所有的材质并创建对应的sprite，如何添加?通过PIXI.loader.resources 可以访问加载的素材。

var gameScene;

function setup() {
    gameScene = new PIXI.Container();
}

注意：pixi需要在一个服务器上运行，推荐调试的时候使用 http-server 本地服务器，

• 游戏开始界面场景

• 游戏结束界面场景（一个显示一个消失）

利用pixi绘制图形

绘制线条图形

• 首先需要创建图形类var graphics = new PIXI.Graphics();

• graphics.beginFill(0xFF3300); //图形填充颜色

• graphics.lineStyle(4, 0xffd900,1); //图形边框宽度，颜色，透明度

• 按线条点位坐标绘图

graphics.moveTo(50,50);    //图形绘制起点
graphics.lineTo(250, 50);    //连线到下一个点
graphics.lineTo(100, 100);
graphics.lineTo(50, 50);
graphics.endFill();   // 图形结束标志

绘制方块及圆形

• 绘制方块
  graphics.drawRect(50, 250, 120, 120);
  //参数分别为x点，y点坐标。方块长、方块宽

• 绘制圆角方块
  graphics.drawRoundedRect(150, 450, 300, 100, 15);
  // 前四个参数与绘制方块相同，最后一个圆角半径

• 绘制圆形
  graphics.drawCircle(470, 90,60);
  //参数为x点坐标、y点坐标、圆形半径 60

pixi中的文字应用（初）

• 首先需要创建一个文字类 var basicText = new PIXI.Text('Basic text in pixi');

• 随后可以设值x,y坐标 basicText.x = 30;

  var style = new PIXI.TextStyle({
      fontFamily: 'Arial',  //字体
      fontSize: 36,         //字体大小
      fontStyle: 'italic',  //字体类型（斜体）
      fontWeight: 'bold',   //加粗
      fill: ['#ffffff', '#00ff99'], //由上到下的过渡颜色
      stroke: '#4a1850',    //文字边框颜色
      strokeThickness: 5,   //文字边框粗细
      dropShadow: true,     //阴影
      dropShadowColor: '#000000', //阴影颜色
      dropShadowBlur: 4,          //阴影模糊程度
      dropShadowAngle: Math.PI / 6, //阴影角度
      dropShadowDistance: 6,  //阴影距离
      wordWrap: true,        //自动换行
      wordWrapWidth: 440      
  });
  
  var richText = new PIXI.Text('Rich text with a lot of options', style);
  richText.x = 30;
  richText.y = 180;

  autoDetectRenderer インターフェイスのほかに、CanvasRenderer インターフェイスや WebGLRenderer インターフェイスもあります。
  autoDetectRenderer は、クライアントの WebGL サポートに基づいて WebGL または Canvas レンダラーを自動的に作成できます。

  ステージを作成する

• ステージはコンテナ (Container) に相当し、要素を追加した後、レンダラー (renderer) がステージをレンダリングします。最上位のコンテナに相当します。 pixi.js には Container() クラスがあります。このクラスはコンテナです。

  rrreee
マテリアルセットを作成する🎜アニメーションで最も重要な要素は画像 (マテリアル) です。この種の特殊な画像オブジェクトは、pixi.js ではスプライト (<code>sprite) と呼ばれます。 code> >)、
アニメーション効果は、sprite のサイズ、位置、その他の属性を制御することで実現できます。 🎜🎜 pixi には sprite クラスがあり、外部の画像（素材）に基づいて pixi で使用できる を作成できます。 ) >スプライトオブジェクト。 🎜🎜🎜作成方法は 3 つあります: 🎜🎜
🎜🎜単一の画像から作成🎜🎜🎜🎜 マテリアル画像全体から、さまざまな位置とサイズに応じて切り取って作成します。マテリアル 作成する特定のパーツ sprite🎜🎜🎜🎜マテリアルセットから作成🎜

マテリアルセットは、あるマテリアル画像内の画像の位置やサイズを定義したjsonファイルで、メリットなど スプライトを作成するたびに位置やサイズを定義する必要がありません。一方、素材画像を変更する際にコードを修正する必要がありません。
🎜🎜🎜マテリアルセットに従って画像を読み込みます🎜🎜inpixi

には画像の読み込みを管理するための loader クラスがあり、コールバック関数を呼び出しますロードが完了した後。 🎜rrreee🎜
treasureHunter.jsonは素材セットの設定ファイルで、setupは画像読み込み後に呼び出されるコールバック関数です。
PIXI.loader は、読み込みが完了した後、PIXI.loader.resources を通じて読み込まれた画像を取得できます。 🎜🎜コールバック関数
🎜🎜画像の読み込みが完了すると、PIXI.loader は次の処理ステップのために setup 関数を自動的に呼び出します。まずテストメソッドを定義して
期待どおりかどうかを確認しましょう。 🎜rrreee🎜シーンを作成する(gameScene)🎜🎜ゲームでは通常2つのシーンが作成され、1つは通常のゲーム画面を表示するために使用され(gameScene)、もう1つはゲーム結果を表示するために使用されます(gameOverScene)。 🎜rrreee🎜 コンテナ内のすべてのマテリアルを追加し、対応する スプライト を作成するには、PIXI.loader.resources を通じてロードされたマテリアルにアクセスする方法を教えてください。 🎜rrreee

🎜注: pixi はサーバー上で実行する必要があります。デバッグ時には http-server ローカル サーバーを使用することをお勧めします。🎜

🎜🎜ゲームインターフェースシーンの開始🎜🎜🎜🎜ゲーム終了インターフェースシーン (1 つは表示され、1 つは消えます)🎜🎜🎜🎜 Pixi を使用してグラフィックを描画します🎜

線グラフィックを描画する

🎜🎜まず、グラフィック クラスを作成する必要があります var graphics = new PIXI.Graphics();🎜🎜🎜🎜graphics.beginFill(0xFF3300); //グラフィックの塗りつぶし色🎜 🎜🎜🎜graphics .lineStyle(4, 0xffd900,1); //グラフィック枠線の幅、色、透明度🎜🎜🎜🎜ラインポイント座標に従って描画🎜🎜🎜rrreee

正方形を描画し、円

🎜🎜🎜正方形を描画します🎜
graphics.drawRect(50, 250, 120, 120);
//パラメータはx点、y点の座標です。正方形の長さ、正方形の幅🎜🎜🎜🎜🎜角丸正方形を描画します🎜
graphics.drawRoundedRect(150, 450, 300, 100, 15);
//最初の 4 つパラメータは正方形を描くのと同じです 🎜🎜🎜🎜🎜 は円を描くために使用されます 🎜
graphics.drawCircle(470, 90,60);
//パラメータは、x 点座標、y 点座標、円半径 60 です🎜🎜🎜🎜Pixi のテキスト アプリケーション (初期)🎜
🎜🎜まず、 text class var BasicText = new PIXI.Text('Pixi の基本テキスト');🎜🎜🎜🎜その後、x、y 座標を設定できますbasicText.x = 30;🎜🎜🎜🎜🎜複雑なスタイルクラス🎜🎜🎜🎜rrreee

以上がJavascriptのpixiフレームワークに関する予備研究の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。