Wieder einmal ein neues (sehr kurzes) Tutorial von mir. Wir werden uns heute anhand der Windmühle von PandaMaru ansehen, wie man ein Windrad smooth drehen lassen kann.
Die Mühle setzt sich hier aus 3 Teilen zusammen (Windmühle an sich als Tileset!):
Und so sieht das Event aus:
So, und der Rest ist eigentlich nur noch Script:
- $gameSystem.windrad = PIXI.Sprite.fromImage('img/pictures/Windrad_PandaMaru.png');
- // PIXI-Bildobjekt mit der Grafik des Windrades
- $gameSystem.windrad.anchor.set(0.5);
- // Verankerung des Bildes in der Mitte
- $gameSystem.windrad.x = 458;
- // X- Koordinate
- $gameSystem.windrad.y = 192;
- // Y- Koordinate
- SceneManager._scene.addChild($gameSystem.windrad);
- // Fügt das Objekt der Scene hinzu (damit es angezeigt wird)
- $gameSystem.windrad.rotation += 0.01;
- // Bringt das Windrad zum rotieren
$gameSystem.windrad ist eine öffentliche Variable! Seid euch also sicher einen Namen zu wählen, der nirgendwo anders verwendet wird.
Das PIXI-Objekt wird an $gameSystem angehängt, damit es beim speichern mitgespeichert wird. Außerdem könntet ihr die Grafiken so theoretisch wieder löschen:
- $gameSystem.windradmitte = PIXI.Sprite.fromImage('img/pictures/WindradMitte_PandaMaru.png');
- // PIXI-Bildobjekt mit der Grafik der Windradmitte
- $gameSystem.windradmitte.anchor.set(0.5);
- // Verankerung des Bildes in der Mitte
- $gameSystem.windradmitte.x = 458;
- // X- Koordinate
- $gameSystem.windradmitte.y = 194;
- // Y- Koordinate
- SceneManager._scene.addChild($gameSystem.windradmitte);
- // Fügt das Objekt der Scene hinzu (damit es angezeigt wird)
EDIT: (Fix Windrad an Map kleben)
- Game_Map.prototype.canvasToMapXX = function(x) { // Funktion zum aktualisieren des X Wertes abhängig von der Map
- var tileWidth = 48;
- var originX = this._displayX * tileWidth;
- var mapX = ((originX + x) / tileWidth);
- return mapX;
- };
- Game_Map.prototype.canvasToMapYY = function(y) { // Funktion zum aktualisieren des Y Wertes abhängig von der Map
- var tileHeight = 48;
- var originY = this._displayY * tileHeight;
- var mapY = ((originY + y) / tileHeight);
- return mapY;
- };
- $gameSystem.windrad.x = 485 - ($gameMap.canvasToMapXX(458) - 9) * 48; // Formel um den X Wert des Windrades zu setzen (485 - 458 ist der Off-grid Wert der dazugerechnet wird)
- $gameSystem.windrad.y = 194 - ($gameMap.canvasToMapYY(194) - 4) * 48; // Formel um den Y Wert des Windrades zu setzen
- $gameSystem.windradmitte.x = 485 - ($gameMap.canvasToMapXX(458) - 9) * 48;
- $gameSystem.windradmitte.y = 196 - ($gameMap.canvasToMapYY(196) - 4) * 48;
- // 9 = grober X Wert in dem Editor Grid (man muss halt ein bisschen mit den Werten rumbasteln bis die Grafik wirklich dort angezeit wird wo man sie haben will)
- // 4 = grober Y Wert in dem Editor Grid
Packt das einfach noch in die Loop zu dem rotieren des Windrades! (Nicht die Funktionen!!!)
Das war es auch schon wieder von mir! Lasst doch Feedback da
Download: http://www.mediafire.com/file/…kbm5rkj4/Windrad.zip/file