Merge branch 'develop' of github.com:thecodingmachine/workadventure into metadataScriptingApi
This commit is contained in:
GRL
commit
cec7087fc2
33
docs/maps/animations.md
Normal file
33
docs/maps/animations.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{.section-title.accent.text-primary}
|
||||
# Animating WorkAdventure maps
|
||||
|
||||
A tile can run an animation in loops, for example to render water or blinking lights. Each animation frame is a single
|
||||
32x32 tile. To create an animation, edit the tileset in Tiled and click on the tile to animate (or pick a free tile to
|
||||
not overwrite existing ones) and click on the animation editor:
|
||||
|
||||
|
||||
<div class="px-5 card rounded d-inline-block">
|
||||
<img class="document-img" src="https://workadventu.re/img/docs/anims/camera.png" alt="" />
|
||||
</div>
|
||||
|
||||
You can now add all tiles that should be part of the animation via drag and drop to the "playlist" and adjust the frame duration:
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/animation_editor.png" alt="" />
|
||||
<figcaption class="figure-caption">The tile animation editor</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
You can preview animations directly in Tiled, using the "Show tile animations" option:
|
||||
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/settings_show_animations.png" alt="" />
|
||||
<figcaption class="figure-caption">The Show Tile Animations option</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{.alert.alert-info}
|
||||
**Tip:** The engine does tile-updates every 100ms, animations with a shorter frame duration will most likely not look that good or may even do not work.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{.section-title.accent.text-primary}
|
||||
# API Room functions Reference
|
||||
# API UI functions Reference
|
||||
|
||||
### Opening a popup
|
||||
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
"generic-type-guard": "^3.2.0",
|
||||
"google-protobuf": "^3.13.0",
|
||||
"phaser": "^3.54.0",
|
||||
"phaser-animated-tiles": "workadventure/phaser-animated-tiles#da68bbededd605925621dd4f03bd27e69284b254",
|
||||
"phaser3-rex-plugins": "^1.1.42",
|
||||
"queue-typescript": "^1.0.1",
|
||||
"quill": "1.3.6",
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@ import {EmoteManager } from "./EmoteManager";
|
|||
import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
|
||||
import { MenuScene, MenuSceneName } from '../Menu/MenuScene';
|
||||
|
||||
import AnimatedTiles from "phaser-animated-tiles";
|
||||
|
||||
export interface GameSceneInitInterface {
|
||||
initPosition: PointInterface | null,
|
||||
reconnecting: boolean
|
||||
|
|
@ -143,6 +145,7 @@ export class GameScene extends DirtyScene implements CenterListener {
|
|||
Map!: Phaser.Tilemaps.Tilemap;
|
||||
Objects!: Array<Phaser.Physics.Arcade.Sprite>;
|
||||
mapFile!: ITiledMap;
|
||||
animatedTiles!: AnimatedTiles;
|
||||
groups: Map<number, Sprite>;
|
||||
startX!: number;
|
||||
startY!: number;
|
||||
|
|
@ -267,6 +270,7 @@ export class GameScene extends DirtyScene implements CenterListener {
|
|||
message: this.originalMapUrl ?? file.src
|
||||
});
|
||||
});
|
||||
this.load.scenePlugin('AnimatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles');
|
||||
this.load.on('filecomplete-tilemapJSON-' + this.MapUrlFile, (key: string, type: string, data: unknown) => {
|
||||
this.onMapLoad(data);
|
||||
});
|
||||
|
|
@ -466,6 +470,9 @@ export class GameScene extends DirtyScene implements CenterListener {
|
|||
|
||||
this.initCamera();
|
||||
|
||||
this.animatedTiles.init(this.Map);
|
||||
this.events.on('tileanimationupdate', () => this.dirty = true);
|
||||
|
||||
this.initCirclesCanvas();
|
||||
|
||||
// Let's pause the scene if the connection is not established yet
|
||||
|
|
|
|||
|
|
@ -4098,6 +4098,10 @@ pbkdf2@^3.0.3:
|
|||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
phaser-animated-tiles@workadventure/phaser-animated-tiles#da68bbededd605925621dd4f03bd27e69284b254:
|
||||
version "2.0.2"
|
||||
resolved "https://codeload.github.com/workadventure/phaser-animated-tiles/tar.gz/da68bbededd605925621dd4f03bd27e69284b254"
|
||||
|
||||
phaser3-rex-plugins@^1.1.42:
|
||||
version "1.1.47"
|
||||
resolved "https://registry.yarnpkg.com/phaser3-rex-plugins/-/phaser3-rex-plugins-1.1.47.tgz#89299369437a0032ad31c64e89a26d20fd8a5867"
|
||||
|
|
|
|||
120
maps/tests/animated_tiles.json
Normal file
120
maps/tests/animated_tiles.json
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
{ "compressionlevel":-1,
|
||||
"height":10,
|
||||
"infinite":false,
|
||||
"layers":[
|
||||
{
|
||||
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
"height":10,
|
||||
"id":1,
|
||||
"name":"floor",
|
||||
"opacity":1,
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
"width":10,
|
||||
"x":0,
|
||||
"y":0
|
||||
},
|
||||
{
|
||||
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
"height":10,
|
||||
"id":2,
|
||||
"name":"start",
|
||||
"opacity":1,
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
"width":10,
|
||||
"x":0,
|
||||
"y":0
|
||||
},
|
||||
{
|
||||
"draworder":"topdown",
|
||||
"id":3,
|
||||
"name":"floorLayer",
|
||||
"objects":[
|
||||
{
|
||||
"height":261.73266830836,
|
||||
"id":3,
|
||||
"name":"",
|
||||
"rotation":0,
|
||||
"text":
|
||||
{
|
||||
"color":"#ffffff",
|
||||
"fontfamily":"Sans Serif",
|
||||
"pixelsize":11,
|
||||
"text":"Test:\nOpen this page\n\nResult:\nThe water tileset should be animated",
|
||||
"wrap":true
|
||||
},
|
||||
"type":"",
|
||||
"visible":true,
|
||||
"width":252.4375,
|
||||
"x":46.5894222943362,
|
||||
"y":34.2876372135732
|
||||
}],
|
||||
"opacity":1,
|
||||
"type":"objectgroup",
|
||||
"visible":true,
|
||||
"x":0,
|
||||
"y":0
|
||||
}],
|
||||
"nextlayerid":8,
|
||||
"nextobjectid":5,
|
||||
"orientation":"orthogonal",
|
||||
"renderorder":"right-down",
|
||||
"tiledversion":"2021.03.23",
|
||||
"tileheight":32,
|
||||
"tilesets":[
|
||||
{
|
||||
"columns":8,
|
||||
"firstgid":1,
|
||||
"image":"animated_tiles.png",
|
||||
"imageheight":32,
|
||||
"imagewidth":256,
|
||||
"margin":0,
|
||||
"name":"animated_tiles",
|
||||
"spacing":0,
|
||||
"tilecount":8,
|
||||
"tileheight":32,
|
||||
"tiles":[
|
||||
{
|
||||
"animation":[
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":0
|
||||
},
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":1
|
||||
},
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":2
|
||||
},
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":3
|
||||
},
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":4
|
||||
},
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":5
|
||||
},
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":6
|
||||
},
|
||||
{
|
||||
"duration":100,
|
||||
"tileid":7
|
||||
}],
|
||||
"id":0
|
||||
}],
|
||||
"tilewidth":32
|
||||
}],
|
||||
"tilewidth":32,
|
||||
"type":"map",
|
||||
"version":1.5,
|
||||
"width":10
|
||||
}
|
||||
BIN
maps/tests/animated_tiles.png
Normal file
BIN
maps/tests/animated_tiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -154,6 +154,14 @@
|
|||
<a href="#" class="testLink" data-testmap="Metadata/showHideLayer.json" target="_blank">Testing show or hide a layer by Scripting API</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="radio" name="test-animated-tiles"> Success <input type="radio" name="test-animated-tiles"> Failure <input type="radio" name="test-animated-tiles" checked> Pending
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="testLink" data-testmap="animated_tiles.json" target="_blank">Test animated tiles</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -3473,9 +3473,9 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
|
|||
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
|
||||
|
||||
set-getter@^0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
|
||||
integrity sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.1.tgz#a3110e1b461d31a9cfc8c5c9ee2e9737ad447102"
|
||||
integrity sha512-9sVWOy+gthr+0G9DzqqLaYNA7+5OKkSmcqjL9cBpDEaZrr3ShQlyX2cZ/O/ozE41oxn/Tt0LGEM/w4Rub3A3gw==
|
||||
dependencies:
|
||||
to-object-path "^0.3.0"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue