Javascript의 pixi 프레임워크에 대한 예비 연구

pixi.js

렌더러 만들기

(캔버스)에 해당하는 애니메이션을 재생할 수 있는 영역을 만듭니다.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> >),
스프라이트의 크기, 위치 및 기타 일부 속성을 제어하여 애니메이션 효과를 얻을 수 있습니다. 🎜🎜pixi에는 sprite 클래스가 있는데, 외부 사진(자료)을 기반으로 pixi에서 사용할 수 있는 를 생성할 수 있습니다. ) >스프라이트 개체입니다. 🎜🎜🎜생성 방법에는 세 가지가 있습니다: 🎜🎜
🎜🎜단일 이미지에서 생성🎜🎜🎜🎜전체 자료 이미지에서 생성, 다양한 위치와 크기에 따라 차단 the Material 스프라이트를 생성하는 특정 부분🎜🎜🎜🎜Material set에서 생성🎜

Material Set은 특정 Material 이미지에서 이미지의 위치와 크기를 정의하는 json 파일이며, 등의 장점이 있습니다. 스프라이트를 생성할 때마다 위치와 크기를 정의할 필요가 없습니다. 반면, 머티리얼 이미지를 수정할 때는 코드를 수정할 필요가 없습니다.
🎜🎜🎜소재 세트에 따라 이미지를 로드합니다🎜🎜inpixi

에 loader 클래스가 있어 이미지 로딩을 관리하고 콜백 함수를 호출합니다. 로딩이 완료된 후. 🎜rrreee🎜
treasureHunter.json은 소재세트 구성 파일이고, setup은 이미지 로딩 후 호출되는 콜백 함수입니다.
PIXI.loader는 로딩이 완료된 후 PIXI.loader.resources를 통해 로딩된 이미지를 얻을 수 있습니다. 🎜🎜콜백 기능
🎜🎜이미지 로딩이 완료된 후 PIXI.loader는 다음 처리 단계를 위해 setup 함수를 자동으로 호출합니다. 먼저
테스트 메서드를 정의하여 예상한 대로인지 확인하겠습니다. 🎜rrreee🎜장면 만들기(gameScene)🎜🎜게임은 일반적으로 두 개의 장면을 생성합니다. 하나는 일반 게임 화면을 표시하는 데 사용되며(gameScene), 다른 하나는 게임 결과를 표시하는 데 사용됩니다(gameOverScene). 🎜rrreee🎜컨테이너에 모든 재료를 추가하고 해당 sprite를 생성하려면 어떻게 추가하나요? PIXI.loader.resources를 통해 로드된 재료에 액세스할 수 있습니다. 🎜rrreee

🎜참고: pixi는 서버에서 실행해야 합니다. 디버깅할 때 http-server 로컬 서버를 사용하는 것이 좋습니다. 🎜

🎜🎜Game 시작 인터페이스 장면 🎜🎜🎜🎜게임 종료 인터페이스 장면(하나는 나타나고 하나는 사라짐)🎜🎜🎜🎜pixi를 사용하여 그래픽 그리기🎜

선 그래픽 그리기

🎜🎜먼저 그래픽 클래스 var graphic = 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('Basic text in pixi');🎜🎜🎜🎜그런 다음 x, y 좌표를 설정할 수 있습니다basicText.x = 30;🎜🎜🎜🎜🎜복잡한 스타일 수업🎜🎜🎜🎜rrreee

위 내용은 Javascript의 pixi 프레임워크에 대한 예비 연구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!