3

Estoy tratando de aprender un framework de html5 para desarrollo videojuegos, llamado phaser, por lo que me encuentro realizado el tutorial de aqui, donde dice 'Loading Assets' hay una función preload que carga las imágenes o assets comunmente llamados 'assets' del juego, el código de la función es este:

function preload ()
{
    this.load.image('sky', 'src/games/firstgame/assets/sky.png');
    this.load.image('ground', 'src/games/firstgame/assets/platform.png');
    this.load.image('star', 'src/games/firstgame/assets/star.png');
    this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
    this.load.spritesheet('dude', 
        'src/games/firstgame/assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

lo que me llama la atención de esto es que dentro de las líneas del código de la función se llama a un parametro o método load, y luego image se que las funciones dentro de Javascript son objetos por lo que la sentencia this referencia al mismo objeto función en este caso preload. Intenté buscar algún tipo de documentación de este método o parametro load para saber si es algún tipo de objeto definido en Javascript pero no encontre nada, me gustaría entender porque se puede escribir lo que se muestra en la función ya que pienso que no es un método definido dentro de la clase Function de Javascript

3
  • Hasta donde sé load no existe nativamente en javascript (que alguien me corrija de no ser así) sin embargo si existe en librerías como jquery por ejemplo. Probablemente el load que estás observando sea una función diseñada por los creadores del framework "Phaser". Siendo Javascript con lo que estás trabajando sería un poco más apropiado que uses el término función en vez de objeto.
    – Eztronics
    Commented el 24 feb. 2018 a las 1:22
  • entiendo, en este caso entonces cual sería el contexto de la setencia this o no es posible saberlo a simple vista? Commented el 24 feb. 2018 a las 1:31
  • Con "contexto" preguntas si es global o local la referencia?
    – Eztronics
    Commented el 24 feb. 2018 a las 3:10

3 respuestas 3

1

Este método preload esta dentro de un objeto que extiende de Phaser.State, el cual contiene el objeto load (Phaser.Loader) que es el que tu llamas para cargar assets en el juego te dejo la documentación oficial.

Documentación Phaser.State: https://phaser.io/docs/2.4.4/Phaser.State.html

Documentación Phaser.State.load https://phaser.io/docs/2.4.4/Phaser.State.html#load

0

Las funciones en javascript son ejecutadas con un contexto para this determinado.

En scripts webs por lo general this corresponde al objeto window, pero uno podría realizar lo siguiente:

function miFuncion(){
    this.a = 1;
}

var obj = {};
miFuncion.call(obj);
console.log(obj); // imprime {a: 1}

Efectivamente especificando el contexto para this

-1

Cuando usas Phaser, la forma de trabajar es crear un objeto Game y pasarle, entre otros atributos, el objeto State, que debe/puede tener los métodos preload, create, update, render. Algo como lo siguiente:

function preload() { ... }

function create() { ... }

let game= new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', 
{ preload: preload, create: create });

Lo que hace Phaser internamente es algo como esto:

//this es la instancia de Game
var preload=this.state.preload;
preload();

Por tanto, this es una instancia de Phaser.Game, que tiene las propiedades que estás usando.

Si declarases preload así:

let preload= () => {


};

Podrías comprobar como el juego falla, porque las funciones arrow tienen el contexto fijado en tiempo de declaración.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.