Jump to content

How can I adjust `Phaser.Creature` height and width proportionally?


notalentgeek
 Share

Recommended Posts

I am currently learning Phaser by doing some examples. I am currently here: https://phaser.io/examples/v2/animation/creature-dragon-multiple. I am wondering, how can I set the height and width of `Phaser.Creature` object? The default `height` and `width` are set to undefined. Hence I need to set both height and width in order to set the `Phaser.Creature` dimension.

Here are some codes.

dragon_character.play(true); // `true` is used for looping forever.
dragon_character.scale.set(20);

dragon_character.height = 100;
dragon_character.width = 100;

console.log(dragon_character.height); // 100.
console.log(dragon_character.width); // 100.

Here are another codes.

dragon_character.play(true); // `true` is used for looping forever.
dragon_character.scale.set(20);

dragon_character.height = 100;

console.log(dragon_character.height); // 100.
console.log(dragon_character.width); // Undefined.

// Additionally the animation does not show up in the screen.

If I only set either height or width, the `Phaser.Creature` will not show up in the screen. I don't know if there is no way to set height and let the width adjusted proportionally (vice-versa). Additionally, I could not found a way to get the height and width properties if the dimension is set with `Phaser.Creature.scale.set(25)`.

To sum up, my questions:

  • Is there any way to set either height or width and let the un-set properties to adjust in proportion?
  • How can I know the `Phaser.Creature` height and width if it is set with `Phaser.Creature.scale.set()`?
Link to comment
Share on other sites

12 hours ago, jjwallace said:

get the ratio of width vs height and then multiply that :P

I found a weird behavior....

          dragon_character.play(true); // `true` is used for looping forever.
          dragon_character.scale.set(1);
          console.log("==========");
          console.log("after setting up scale and before setting up width and height");
          console.log("scale.x = " + dragon_character.scale.x); // `1`, which is expected.
          console.log("scale.y = " + dragon_character.scale.y); // `1`, which is expected.
          console.log("height = " + dragon_character.height); // `undefined`, which is expected.
          console.log("width = " + dragon_character.width); // `undefined`, which is expected.
          console.log("==========");
          dragon_character.height = dragon_character.scale.y*100;
          dragon_character.width = dragon_character.scale.x*100;
          console.log("==========");
          console.log("after setting up scale and after setting up width and height");
          console.log("scale.x = " + dragon_character.scale.x); // `0`, which is NOT expected.
          console.log("scale.y = " + dragon_character.scale.y); // `4.138100158128295`, which is NOT expected.
          console.log("height = " + dragon_character.height); // `100`, which is expected.
          console.log("width = " + dragon_character.width); // `0`, which is expected, if the `scale.x` is indeed `0`.
          console.log("==========");
          dragon_characters.push_with_limit(dragon_character);

Here is my full codes: https://pastebin.com/fk5ZZ5e8.

Link to comment
Share on other sites

  • 1 year later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...