Schnellstart-Beispiel-Tutorial zu createjs

Als ich anfing, das CreateJS-Framework zu verwenden, stellte ich fest, dass es im Internet noch sehr wenige verwandte Tutorials gab, also schrieb ich einen Artikel, damit ich in Zukunft leichter darauf zurückgreifen kann.

createjs-Einführung

Offizielle Website: http://www.createjs.cc/

createjs enthält die folgenden vier Teile:

EaselJS: wird zum Zeichnen von Sprites, Animationen, Vektoren und Bitmaps sowie zum Erstellen interaktiver Erlebnisse auf HTML5 Canvas (einschließlich Multi-Touch) verwendet.

TweenJS: wird für Animationen verwendet Effekte

SoundJS: Audiowiedergabe-Engine

PreloadJS: Vorladen von Website-Ressourcen

Ähnlich wie SoundJS, PreloadJS, wenn Sie es selbst verwalten. Wenn es mehr ist Praktischerweise können Sie sie auch selbst schreiben. Im Allgemeinen entsprechen sie einer Hilfsfunktion, ob optional oder nicht. Daher wird in diesem Artikel hauptsächlich die Verwendung von EaselJS erläutert.

1. Die allgemeine API von EaselJS

• Draw Bilder Verwenden Sie (Bitmap)

• , um Grafiken wie Rechtecke, Kreise usw. zu zeichnen. Verwenden Sie (Form) [Ähnlich wie das Ändern der Koordinaten x, y, das Erhöhen des Schattens, die Alpha-Transparenz, das Reduzieren und Vergrößerungsmaßstab kann mehrere Anzeigeobjekte enthalten

• 2. Der allgemeine Prozess des EaselJS-Zeichnens

Der allgemeine Prozess:

Ein Anzeigeobjekt erstellen → einige Parameter festlegen → Methodenzeichnung aufrufen → zur Bühne hinzufügen → update() , der Code lautet wie folgt:

Grafiken können Stil, Linienbreite, Farbe usw. festlegen. Sie können auch einige Methoden zum Zeichnen von Grafiken aufrufen, z. B. Rechteck-DrawRect, Kreis-DrawCircle usw. Sie können die API selbst überprüfen, um Einzelheiten zu erfahren.

Hinweis: Denken Sie daran, das Formobjekt zur Bühne hinzuzufügen, da es sonst nicht auf dem Bildschirm angezeigt wird.

<script src="easeljs-0.7.1.min.js?1.1.10"></script>  //引入相关的js文件
<canvas id="canvas"></canvas> canvas = document.querySelector('#canvas' stage =  rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();

3. Ticker-Timer

Schreiben Sie auf jeden Fall createjs Einer davon ist der Ticker, der die Bühne hauptsächlich regelmäßig aktualisiert. Die ideale Bildrate beträgt 60 FPS

4. Steuern Sie die hierarchische Beziehung mehrerer Anzeigeobjekte

createjs.Ticker.setFPS(60);

Stufe Das enthaltene Objekt verfügt über ein Kinderattribut, das die untergeordneten Elemente darstellt. Es handelt sich um ein Array, das bei 0 beginnt Ein Index. Einfach ausgedrückt, der letztere überschreibt den vorherigen. Die addChild-Methode wird am Ende der Anzeigeliste hinzugefügt.

Wir können auch die Kaskadenwirkung von Kindern dynamisch verändern.

5 Es kann Text, Bitmap, Form, Sprite und andere EaselJS-Elemente enthalten, die in einen Container eingefügt werden können, um eine einheitliche Verwaltung zu ermöglichen.

stage.setChildIndex(red,1);

Eine Figur besteht beispielsweise aus Händen, Füßen, Kopf und Körper. Sie können diese Teile in den gleichen Behälter legen und gleichmäßig bewegen. Auch die Verwendungsweise ist relativ einfach:

嬬嬬嬬～Der Schwerpunkt dieses Artikels liegt auf dem Zeichnen und Verarbeiten von Bildern

6. Bilder zeichnen

var contain = new createjs.Container(); 
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

Folgen Sie dem normalen Zeichenprozess von EaselJS oben Angenommen, der obige Code sollte normal angezeigt werden. In einigen Fällen muss jedoch bestätigt werden, dass diese Bildressource erfolgreich geladen werden kann. Andernfalls wird kein Bild auf der Leinwand angezeigt Wenn nicht, muss es nach dem Laden des Bildes gezeichnet werden.

Das bloße Zeichnen des Bildes reicht nicht aus.

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

6.1 Fügen Sie dem Bild eine Maskenebene hinzu

Verwenden Sie das Maskenattribut, um nur den Bereich anzuzeigen, in dem sich das Bild mit dem schneidet Form

var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () { var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

Häufige Anwendungsszenarien: Wird zum Zuschneiden von Bildern verwendet, z. B. zum Anzeigen kreisförmiger Bilder usw.

6.2 Bilder hinzufügen Filtereffekt

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;//遮罩图形shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩stage.addChild(shape);
stage.addChild(bg);
stage.update();

Wir haben festgestellt, dass das Bild immer noch nicht unscharf wurde. Der Grund dafür ist, dass Die Stufe wird unmittelbar nach dem Hinzufügen des Filters zum Bild aktualisiert und der Filter kann nur die Wirkung eines Frames beibehalten. Der zweite Frame-Filter ist ungültig. Nach Verwendung der Methode „cache()“ des Bildes kann der Filtereffekt unabhängig von der Aktualisierung der Stufe beibehalten werden. Das Hinzufügen von Cache hat viele Funktionen, wie z. B. die Verbesserung von FPS, Caching usw.

6.3 Verwenden Sie „Rechteck“, um das Bild zuzuschneiden

var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];

Verwenden Sie das integrierte Rechteckobjekt von EaselJS, um ein Auswahlfeld zu erstellen, um bestimmte Teile des Bildes anzuzeigen Bild.

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

适用场景：拼图小游戏，剪裁图片……

 

7. createjs事件

easeljs事件默认是不支持touch设备的，需要以下代码才支持：

createjs.Touch.enable(stage);

对于Bitmap，Shape等对象，都可以直接使用addEventListener进行事件监听

bitmap = new createjs.Bitmap('');
bitmap.addEventListener（‘click’，handle）;

 

8. CreateJs的渲染模式

CreateJs提供了两种渲染模式，一种是用setTimeout，一种是用requestAnimationFrame，默认是setTimeout，默认的帧数是20，一般的话还没啥，但是如果动画多的话，设置成requestAnimationFrame模式的话，就会感觉到动画如丝般的流畅。

 

 

9.适配

在移动端开发中，不得不面对一个多屏幕，多尺寸的问题，所以适配问题显得特别重要。

<canvas id="game" width="1000" height="700"></canvas>

注意，以上代码的width，height不同于css中的width，height。

比如，你在canvas内部绘制图片，用x，y轴进行定位，这里的x，y是相对于canvas这个整体。

我们再把canvas当成一整张图片使用css进行适配

canvas{
     width: 100%;
}

那么，就会有以下的效果，canvas会适配屏幕尺寸，里面的图片也会等比例变大变小。

     

 

 

Das obige ist der detaillierte Inhalt vonSchnellstart-Beispiel-Tutorial zu createjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!