Eine vorläufige Studie zum Pixi-Framework in Javascript

pixi.js

Erstellen Sie einen Renderer

Erstellen Sie einen Bereich, der Animationen abspielen kann, äquivalent zu (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);

Außer der autoDetectRenderer-Schnittstelle
autoDetectRenderer kann neben den CanvasRenderer- und WebGLRenderer-Schnittstellen automatisch einen WebGL- oder Canvas-Renderer basierend auf der WebGL-Unterstützung des Clients erstellen.

Erstellen Sie eine Bühne

Die Bühne entspricht einem Container (Container) Nach dem Hinzufügen von Elementen wird die Bühne vom Renderer gerendert (renderer). Entspricht einem Container der obersten Ebene.

Es gibt eine pixi.js-Klasse in Container(), und diese Klasse ist ein Container.

var stage = new PIXI.Container();

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

Erstellen Sie einen Materialsatz

Das wichtigste Element in der Animation ist ein Bild (Material). Diese Art von speziellem Bildobjekt wird in <🎜 als Sprite (pixi.js) bezeichnet > , sprite kann Animationseffekte erzielen, indem die Größe, Position und einige andere Attribute von
gesteuert werden. sprite

Es gibt eine

-Klasse in pixi, die basierend auf einem externen Bild (Material) ein sprite-Objekt erstellen kann, das in pixi verwendet werden kann. sprite

Es gibt drei Möglichkeiten zum Erstellen:

• Erstellen aus einem einzelnen Bild

• Aus dem Bei der Erstellung des gesamten Materialbildes schneiden Sie bestimmte Teile entsprechend unterschiedlicher Position und Größe auf dem Material aus, um

  sprite

• Aus dem Materialsatz erstellen
  Der Materialsatz ist Eine JSON-Datei, definiert. Der Vorteil davon besteht darin, dass Sie nicht jedes Mal, wenn Sie ein Sprite erstellen, die Position und Größe definieren müssen. Andererseits müssen Sie den Code nicht ändern, wenn Sie das Sprite ändern Materialbild.

  
  
  

Bilder entsprechend dem Materialsatz laden

Es gibt eine

-Klasse in

, um das Laden von Bildern zu verwalten, und Rufen Sie die Rückruffunktion auf, nachdem der Ladevorgang abgeschlossen ist. pixiloader

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

treasureHunter.json ist die Konfigurationsdatei des Materialsatzes und setup ist die Rückruffunktion, die nach dem Laden des Bildes aufgerufen wird.

PIXI.loader kann die geladenen Bilder über PIXI.loader.resources abrufen, nachdem der Ladevorgang abgeschlossen ist.

Rückruffunktion

Nach Abschluss des Bildladens ruft

automatisch die Funktion

für den nächsten Verarbeitungsschritt auf. Definieren wir zunächst PIXI.loader eine Testmethode, um zu sehen, ob sie wie erwartet ist. setup

Erstellen Sie eine Szene (gameScene)

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

Spiele erstellen im Allgemeinen zwei Szenen, eine dient zur Anzeige des normalen Spielbildschirms (gameScene) und die andere zur Anzeige der Spielergebnisse (gameOverScene) .

Im Container müssen Sie alle Materialien hinzufügen und die entsprechenden

var gameScene;

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

erstellen. Sie können über

auf die geladenen Materialien zugreifen. spritePIXI.loader.resources

var gameScene;

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

Hinweis: pixi muss auf einem Server ausgeführt werden. Es wird empfohlen, beim Debuggen den lokalen Server http-server zu verwenden >Das Spiel beginnt mit der Schnittstellenszene

Spielende-Schnittstellenszene (eine erscheint und eine verschwindet)

• Verwenden Sie Pixi, um Grafiken zu zeichnen
• Liniengrafiken zeichnen

Zuerst müssen Sie eine Grafikklasse erstellen

• //Grafikfüllfarbe

  var graphics = new PIXI.Graphics();

• //Grafische Rahmenbreite, Farbe, Transparenz

  graphics.beginFill(0xFF3300);

Zeichnung nach Linienpunktkoordinaten

• graphics.lineStyle(4, 0xffd900,1);

Quadrate und Kreise zeichnen Form

Ein Quadrat zeichnen

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

//Die Parameter sind der x-Punkt und y Punktkoordinaten bzw. Quadratlänge, Quadratbreite

• 
  Ein abgerundetes Quadrat zeichnengraphics.drawRect(50, 250, 120, 120);
  

//Die ersten vier Parameter sind die gleichen wie beim Zeichnen eines Quadrats, und der letzte Kreis Eckradius

• 
  Zeichne einen Kreis graphics.drawRoundedRect(150, 450, 300, 100, 15);
  

// Die Parameter sind x-Punktkoordinate, y-Punktkoordinate, Kreis Radius 60

• Textanwendung in Pixi (Anfänger)
  graphics.drawCircle(470, 90,60);
  

  Zuerst müssen Sie eine Textklasse erstellen

Sie können dann die XY-Koordinaten festlegen

• var basicText = new PIXI.Text('Basic text in pixi');

• Komplex gestaltete Klasse

  basicText.x = 30;

Das obige ist der detaillierte Inhalt vonEine vorläufige Studie zum Pixi-Framework in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!