Phaser-3: ¿Hay alguna manera de mover una imagen de una ubicación a otra mientras el programa se está ejecutando y que sea visible mientras lo hace?

19 Jun, 2023 Programación 0

Me gustaría crear un sistema de batalla para un juego RPG, donde se reproduzca una animación de apertura que muestre a los personajes luchando moviéndose desde el costado de la pantalla hacia una ubicación en la misma. El código actual, los recursos y la vista actual en ejecución se proporcionan a continuación;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>battle</title>
    <script src="phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">
var config = {
    type: Phaser.AUTO,
    width: 1900,
    height: 900,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0},
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update,
    }
};
var game = new Phaser.Game(config);

function preload(){ 
    this.load.image("background","assets/battle background.png");
    this.load.image("hydroBot","assets/water hydrant.png");
};
function create(){
    const battle = this.add.image(0,0,"background").setOrigin(0,0);
    const bot= this.add.image(1000,200,"hydroBot");
    bot.setScale(5);
};
function update(){

};
</script>
</body>

water_hydrant/hydrobot

View post on imgur.com

la batalla de fondo
https://i.stack.imgur.com/MpUAk.png

la vista actual cuando se ejecuta el código
https://i.stack.imgur.com/3RnNb.png

Muy agradecido, gracias. 🙂

davy.ai

June 19, 2023 at 12:38 am

Para crear un sistema de batalla para un juego de RPG donde se reproduzca una animación de apertura mostrando a los personajes luchando moviéndose desde un lado de la pantalla hasta un lugar en la pantalla, puedes seguir estos pasos:

Agrega más recursos: Aparte del fondo y el recurso de hydroBot, necesitarás más recursos para el jugador y los enemigos. Puedes encontrar hojas de sprites gratuitas en línea o crear las tuyas propias usando una herramienta como Aseprite.
Crea una hoja de sprite: Una hoja de sprite es un archivo de imagen único que contiene varias imágenes más pequeñas, cada una representando un solo cuadro de animación para un personaje. Puedes crear una hoja de sprite usando una herramienta como TexturePacker o ShoeBox.
Define la animación del sprite: Después de cargar la hoja de sprite, definirás las animaciones para cada personaje. Una animación consiste en una secuencia de cuadros que se reproducen en un bucle. Puedes definir las animaciones usando el administrador de animaciones en el framework Phaser.
Agrega movimiento y colisión: Para mover los personajes de un lado de la pantalla a un lugar en la pantalla, necesitarás agregar lógica de movimiento. Puedes usar el motor de física integrado en Phaser para manejar colisiones y movimiento.
Dispara la animación de apertura: Finalmente, dispararás la animación de apertura reproduciendo las animaciones predefinidas para cada personaje. Puedes hacer esto usando el método animation.play en Phaser.

Aquí tienes un ejemplo de fragmento de código que muestra cómo cargar una hoja de sprite y reproducir animaciones en Phaser:

function preload() {
  this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 32,
    frameHeight: 48
  });
}

function create() {
  this.anims.create({
    key: 'idle',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });

  this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 4, end: 7 }),
    frameRate: 10,
    repeat: -1
  });

  const player = this.physics.add.sprite(100, 200, 'player');
  player.anims.play('idle', true);
}

En este ejemplo, cargamos una hoja de sprite llamada player.png y definimos dos animaciones llamadas idle y walk. Luego creamos un sprite usando el motor de física y reproducimos la animación idle de forma predeterminada.

Answer

davy.ai

June 19, 2023 at 12:38 am
Para crear un sistema de batalla para un juego de RPG donde se reproduzca una animación de apertura mostrando a los personajes luchando moviéndose desde un lado de la pantalla hasta un lugar en la pantalla, puedes seguir estos pasos:
1. Agrega más recursos: Aparte del fondo y el recurso de hydroBot, necesitarás más recursos para el jugador y los enemigos. Puedes encontrar hojas de sprites gratuitas en línea o crear las tuyas propias usando una herramienta como Aseprite.
2. Crea una hoja de sprite: Una hoja de sprite es un archivo de imagen único que contiene varias imágenes más pequeñas, cada una representando un solo cuadro de animación para un personaje. Puedes crear una hoja de sprite usando una herramienta como TexturePacker o ShoeBox.
3. Define la animación del sprite: Después de cargar la hoja de sprite, definirás las animaciones para cada personaje. Una animación consiste en una secuencia de cuadros que se reproducen en un bucle. Puedes definir las animaciones usando el administrador de animaciones en el framework Phaser.
4. Agrega movimiento y colisión: Para mover los personajes de un lado de la pantalla a un lugar en la pantalla, necesitarás agregar lógica de movimiento. Puedes usar el motor de física integrado en Phaser para manejar colisiones y movimiento.
5. Dispara la animación de apertura: Finalmente, dispararás la animación de apertura reproduciendo las animaciones predefinidas para cada personaje. Puedes hacer esto usando el método animation.play en Phaser.
Aquí tienes un ejemplo de fragmento de código que muestra cómo cargar una hoja de sprite y reproducir animaciones en Phaser:
```
function preload() {
  this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 32,
    frameHeight: 48
  });
}

function create() {
  this.anims.create({
    key: 'idle',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });

  this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 4, end: 7 }),
    frameRate: 10,
    repeat: -1
  });

  const player = this.physics.add.sprite(100, 200, 'player');
  player.anims.play('idle', true);
}
```
En este ejemplo, cargamos una hoja de sprite llamada player.png y definimos dos animaciones llamadas idle y walk. Luego creamos un sprite usando el motor de física y reproducimos la animación idle de forma predeterminada.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Phaser-3: ¿Hay alguna manera de mover una imagen de una ubicación a otra mientras el programa se está ejecutando y que sea visible mientras lo hace?

Answer

davy.ai