asked on

In Javascript game coding, how can I decrease an image's size in code?

None of the javascript help pages seem to state how I can change the size of my Javascript game images in code.

Firstly, I have working :

preload ()

{

this.load.image('ball', 'assets//ques1_ball.png');

Then, I have :

create ()

{

const ball = this.add.image(900, 150, 'ball'); (attached below)

that loads in a soccer ball image correctly. But, when this displays it, it is too big.

Can I decrease the image in size, in JS code?

Thanks

gr8gonzo

What you have here is not vanilla JS. It looks like some kind of JS framework - can you elaborate on what you're using?

Michel Plungjan

You are not telling us what framework you are using

this.load and this.add is not standard JS.

In vanilla js it would be according to MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

const image = new Image(900,150);
image.id = "ball";
image.addEventListener("load", function() {
  document.body.appendChild(image); // will be added to the selected container when loaded
})
image.src = "assets/ques1_ball.png";

Open in new window

which is equivalent to

<img src="assets/ques1_ball.png"  width="900" height="150" />

Open in new window

ASKER CERTIFIED SOLUTION

Scott Fell

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

James Hancock

ASKER

Yes,

Thanks

In short, just change the size value in the image.

The code snippet can be found here