Phina. Mostrar imágenes en la cuadrícula mejorada js

SOURCE 9075 palabras JavaScriptPhina.js
Phina. Quadrangle - qita note with js: # comment - 367af72048c31bfa1f
Gracias aquí, por favor.
Después de un día mirando hacia atrás y escribiendo Código de referencia completo y otras cosas...
Utilice el Código de muestra recibido para organizar correctamente.
Muchas gracias.
Es s ólo que cuando se coloca la imagen, se desvía del cuadrilátero.

Esta es una cuadrícula
    Array.range(0, 16).each((X) =>{
      Array.range(0, 16).each((Y) =>{
        let rect = RectangleShape({
          width: 40,
          height: 60,
          padding: 0, // パディングを0にする
          strokeWidth: 1, // 線幅すっきりに
        }).addChildTo(this);
        rect.setPosition(this.gridX.span(X),this.gridY.span(Y));
        rect.setOrigin(0,0); // 左上を原点にする
        rect.fill = 'transparent';
      });
    });
rect.setOrigin(0,0); // 左上を原点にするSe espera que comience en la esquina superior izquierda.
Este
"Los puntos de cuadrícula son correctos en el Centro de la pantalla"
Pato salvaje
"El centro del cuadrilátero (identificado como región) rodeado por la cuadrícula de 4 puntos llega correctamente al Centro de la pantalla."
Completamente incomprensible... Muy bien desordenado.
Un número binario que comienza con cero, el primero como cero, se desvía o cómo...
No hay chismes.
Esquina superior izquierda de la cuadrícula, la imagen también está alineada
    const player = Sprite('player').addChildTo(this);
    player.x = this.gridX.center();
    player.y = this.gridY.center();
    player.setOrigin(0,0)

¿No has pasado por la cabeza?
1 comienza en las rejillas 9 y 9 de 16 minutos.
Me molestó una hora o así, y eso es probablemente lo correcto.
Debido a que el origen ha cambiado, le dije que la esquina superior izquierda de la imagen está en el Centro de la imagen, por lo que es correcto.
Así que... Volviendo a la charla anterior... Ir a poner la piedra en el Centro y Otelo en el Centro parece diferente...
La última vez que la malla gruesa fue discreta (el tamaño era exactamente el mismo), pero todavía no estaba en el Centro de las cuatro esquinas debido al tamaño de la imagen.
El cuadrilátero es 40 * 60. La imagen es 32 * 64.
Debido a que se coloca en la parte superior izquierda, debe ser más de 4 abajo y 8 a la derecha.
Debido a que no hay manera de exceder el tamaño, no es abajo sino arriba.
Coloque a la izquierda y a la derecha en el Centro, y el resto se distribuye uniformemente.
Así que se convirtió en este Código.
    const player = Sprite('player').addChildTo(this);
    player.xOffset = 4;
    player.yOffset = -4;
    player.x = this.gridX.center() + player.xOffset;
    player.y = this.gridY.center() + player.yOffset;
    player.setOrigin(0,0)
No se sabe si hay xoffset o offset para gridx, pero de esta manera, en la línea de abajo, se puede configurar una imagen que muestra ligeramente la cabeza y se encuentra en el Centro izquierdo y derecho.

Referencia


Phina. Cambiar el origen de la forma JS - tipps - qiita
En el futuro, si todos los puntos de origen se colocan en la esquina superior izquierda, puede ser difícil girar en el lugar.
(si el origen de la imagen no se mueve, sino que se compensa)

La última vez


Phina. Usar imagen - qita como base 64 en js