JavaScript Introducing JavaScript Finishing the Game Adding New Graphics

isagani inofinada
isagani inofinada
469 Points

Adding New Graphics

In this part of the Javascript tutorial, I had to change the platform. While I was watching the video the person that was teaching it was doing more things to change the platform. As for me, I think I have found out a shortcut or an easier way. So what I did was change 'platform_1.png' INTO 'platform_2,png under the function //Load Images in line 83. After that, I saved what I changed, and it worked after I previewed it. Can someone please explain.

2 Answers

Brice Roberts
Brice Roberts
18,324 Points

The section

 //Load Images in line 83 
game.load.image('platform', 'platform_1.png');
game.load.image('platform2', 'platform_2.png');

is where the images are loaded, ready to be called by the game. The part inside the round brackets

('platform', 'platform_1.png')

could be thought of as saying

var platform = url('platform_1.png');

If you just replace

'platform_1.png' with 'platform_2.png'

you are replacing the image location for "platform" with the image location for "platform2".

You are not loading two separate images that you can load into the game at the same time.

Tom Oesterman
Tom Oesterman
Pro Student 8,889 Points

To expand on Brice's answer,

Isagani, the first function 'game.load.image' loads images that can be used in the game. If you want to use both platform images, you need to have these lines. They are located around line 87 under the comment //Load images

game.load.image('platform', 'platform_1.png');
game.load.image('platform2', 'platform_2.png');

Now when you call the function 'platforms.create()' you can pass either 'platform' or 'platform2' depending on which image you want to appear.

Such as:

platforms.create(300, 150, 'platform');
platforms.create(450, 300, 'platform2');

This would place the image 'platform_1.png' at position 300, 150, and then image 'platform_2.png' at position 450, 300.

This is why the teacher added the second 'game.load.image' line rather than just replacing the values passed to the function.

Hope this helps.