Präsentation zum Tutorial auf Deutsch
Start repl
https://repl.it/@CoderDojoSaar/phaser-game-template
Assets: Bilder und Sprite
Repl zum Tutorial
Start-Template
<!doctype html>
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/phaser@3.20.0/dist/phaser.js">
</script>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload () {
}
function create () {
}
function update () {
}
</script>
</body>
</html>
Alle Teile des Tutorials ausprobieren
Teil 01: phaser-game.coderdojosaar.repl.co/part01.html
Teil 02: phaser-game.coderdojosaar.repl.co/part02.html
Teil 03: phaser-game.coderdojosaar.repl.co/part03.html
Teil 04: phaser-game.coderdojosaar.repl.co/part04.html
Teil 05: phaser-game.coderdojosaar.repl.co/part05.html
Teil 06: phaser-game.coderdojosaar.repl.co/part06.html
Teil 07: phaser-game.coderdojosaar.repl.co/part07.html
Teil 08: phaser-game.coderdojosaar.repl.co/part08.html
Teil 09: phaser-game.coderdojosaar.repl.co/part09.html
Teil 10: phaser-game.coderdojosaar.repl.co/part10.html
API-Dokumentation (Englisch)
Teil 1 – Phaser starten
- Klasse Phaser.Game:
https://photonstorm.github.io/phaser3-docs/Phaser.Game.html - GameConfig-Objekt:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.GameConfig - Scene (preload, create, update):
https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html
Teil 2 – Asset (Bild) laden
- this.load.image()
https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html#image__anchor
Teil 3 – Bild anzeigen
- this.add.image():
Teil 4 – Physik hinzufügen
- PhysicsConfig:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.PhysicsConfig - Arcade Physics:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Physics.Arcade.html - Klasse StaticGroup:
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.StaticGroup.html - Arcade Gravity:
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Components.Gravity.html
Teil 5 – Sprite hinzufügen
- this.load.spritesheet():
https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html#spritesheet__anchor - ImageFrameConfig:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Loader.FileTypes.html#.ImageFrameConfig - setBounce():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Components.Bounce.html - setCollideWorldBounds():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Components.Bounce.html#setCollideWorldBounds__anchor
Teil 6 – Collider
- this.physics.add.collider()
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html#collider__anchor
Teil 7 – Animationen und Tastatureingaben
- this.anims.create():
https://photonstorm.github.io/phaser3-docs/Phaser.Animations.AnimationManager.html#create__anchor - Animation-Konfiguration:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Animations.html#.Animation - AnimationFrame:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Animations.html#.AnimationFrame - this.anims.generateFrameNumbers():
https://photonstorm.github.io/phaser3-docs/Phaser.Animations.AnimationManager.html#generateFrameNumbers__anchor - createCursorKeys():
https://photonstorm.github.io/phaser3-docs/Phaser.Input.Keyboard.KeyboardPlugin.html#createCursorKeys__anchor - CursorKeys:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Input.Keyboard.html#.CursorKeys - KeyboardKey:
https://photonstorm.github.io/phaser3-docs/Phaser.Input.Keyboard.Key.html - player.body.touching.down:
- Sprite (= player):
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Sprite.html - player.body:
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Sprite.html#body__anchor - Klasse Body:
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html - player.body.touching:
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#touching__anchor - „down„:
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Physics.Arcade.html#.ArcadeBodyCollision
- Sprite (= player):
Teil 8 – Group, Iterator, overlap
- this.physics.add.group():
https://photonstorm.github.io/phaser3-docs/Phaser.Types.GameObjects.Group.html#.GroupCreateConfig - stars.children.iterate():
- this.physics.add.overlap():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html#overlap__anchor - player.setVelocityX():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#setVelocityX - player.anims.play():
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.Animation.html#play__anchor - player.setVelocityY():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#setVelocityY__anchor - star.disableBody():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Components.Enable.html#disableBody__anchor
Teil 9 – Text
- this.add.text():
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#text__anchor - scoreText.setText():
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html#setText__anchor
Teil 10 – Active, enableBody, allowGravity
- stars.countActive():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Group.html#countActive__anchor - child.enableBody():
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Image.html#enableBody__anchor - bomb.allowGravity:
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#allowGravity__anchor
Ein Gedanke zu „HTML5-Spiel mit Phaser.io“
Kommentare sind geschlossen.