Hi and welcome

To get started with a welcome message and a simple menu, please see Part 1 of our Breakout tutorial. While the short tutorial series is about making a breakout game, the first part is entirely dedicated to creating the game's initial screen / main menu. You can find it here:

Breakout Game Tutorial - Part 1

For score and timer - could you define exactly what you would need? How would you calculate score?

Would your timer count down, so you have a maximum time to complete the level? What happens when the timer reaches 0?

allright after that u will teach me how to make the game?

for score if the player gets 5 points or the found all 5 garbages in the river it will say cogratz you clean the river click to go to the next level. 

about the timber in lvl 1 only 1min then if reach to 0 it will say game over

Ok, so this is how I would do it.

1. Create an object called scoreText, containing a TextSprite. This will show your score. Set the initial value to 0.

2. Create an object called congratzMessage, showing whatever message you like... but make this initially invisible (in the Sprites tab, deselect the Visible option). If you have watched the video above, you will know how to load a new scene when this object is clicked.

3. For each object to find in the scene, add a custom property called objectToFind and set it to true (see pictures below)

4. Edit hiddenObject.js in your project (right click and select Show in Code Editor). Around line 29, right before the end of the onMouseDown function, add this code:

this.owner.objectToFind = false;
wade.app.score = (wade.app.score || 0) + 1;
_.scoreText.getSprite().setText(wade.app.score);
if (!wade.getSceneObjects('objectToFind', true).length)
{
    _.congratzMessage.setVisible(true);
}
return true;

done making the tutorial 1 next please the scene2.wsc now 

Finally, for the timer:

• Create a SceneObject and call it timer
• Add a TextSprite to it, and remove the default Sprite
• Set the TextSprite to your preferred font, color and size, and set the text value to 0
• Go to the Functions tab, add a function called start

  this.time = 60;
  this.running = true;
  this.interval(1000, 'tick');

• Add a function called tick

  this.getSprite().setText(--this.time);
  if (this.time == 0)
  {
      // game over - show a message here, or load a scene
  }

• Add a function called stop

  this.running = false;
  this.unschedule('tick');

• In its onAddToScene function:

  this.start();

   

• Finally, edit hiddenObject.js again - just after _congratzMessage.setVisible(true); add this line:
   

  _.timer.stop();

   

scene2.wsc is where you create your main hidden object game - I believe you just watched a youtube video about it?

yes im on scene 2 now where the player will find 5 garbages in the river to complete the lvl1

where is the Set the initial value to 0 of score

Yes I was suggesting that for scene2 you do what it says in this video

How to make a hidden object game

Then do the changes I posted above

allright i will do it that now... i have a question if i can play my game on android after i finish

Sure you can

How to export to Android

The video tutorial says it's a premium feature. Ignore that, it's been free to use for a while

thank you i will start watching again the scene2 tutorial.. if i have question i will just reply here

hi sir what if i want sounds? a welcoming message when player open the game , in scene2/lvl1 sound backgound also sound when player click the garbages

sir i have a problem of my images ... i dont know to make make images like your cats

one of my garbage

thsi is my background

garbage

garbage

garbage

garbage

i will wait for your reply sir ty

i can do it with your pictures but when using my images it cant be done

sir i still cant make it im using these pictures

....

....

sir tell me how  i cant do it?

sir tell me how  i cant do it?

sir why i cant do it? hayss

look at the image sir .. i think it cant detect the 5 garbages. thats the problem

I think you just need a transparent background in your lvl1garbages.png file, not a white background. That should work.

thank you its ok now... i will do the score and timer

i cant understand about the scoretext sir.. u mean .  create sceneobject, properties change name to scoretext? but i cannot see the initial value.. sir how a bout you will make a video.. its easy to follow when watching a video... i have time to wait.. i got 1 week more to finish my project. thank you

Ok, let's try with words and pictures first

1. Create a Scene Object

2. Add a text sprite

3. Set text to 0, change font and color

4. Remove the default sprite

5. Click Properties tab

6. Change name to scoreText

sir.. when timer reaches to 0 its just go to -1 -2 -3 ..... i think the stop isnt working.....   

sir how about having problem with the size of images.. like i can see the play button in the 2nd scene.. also the game menu background is bigger thank my scene2 background how can i fix this problem...

this sir

this sir

Just before loading the second scene with wade.loadScene('scene2.wsc', ... ), you can do

wade.clearScene();

to remove anything that's currently on the scene. This will make your menu's background disappear when the game starts.

> when timer reaches to 0 its just go to -1 -2 -3 ..... i think the stop isnt working.....   

You know where I wrote:

// game over - show a message here, or load a scene

You shouldn't keep that as it is. Replace that with some code that does what you want to do. For example, if you create a scene called gameOver.wsc, you could do

wade.clearScene();
wade.loadScene('gameOver.wsc');

This will stop the timer, and show your game over screen.

wade.clearScene(); is ok now.. i put in the playbutton fucntion

i did it sir... for now i just want to have music background.  and when the player click the wrong theres a sound like tetttt .. 

sir why cant i download package? got 200mb  fore the file system, started cloud build of urproject for android... but when i clicked cloud build it says u dont have any cloud builds

sir gio ... how about in my lvl4 .. i want a fight scene like the master cleaner guy is fighting the king of garbages? how bout that? like having a life bar and attack

For the background music and sounds, first you need to add your ogg sound files to the scene (if you want to target iOS as well, you need to provide an aac version as well as ogg). It is not enough to just add them to the project, they need to be loaded in the scene like this too:

Then you need to play these sounds. There are a few ways of doing that. For the background music, do you want to try our new flow charts?

In your game's scene, click the Edit Flow Chart button in the scene properties. Change the box type to Play bg music (see picture below)

Then enter your music file name in the parameters field, and click OK.

Similarly, in your gameOver scene, you'll want to do the same to stop the background music (there is a Stop bg music box type).

To play sound effects when a user clicks an object, edit hiddenObject.js once again. After line 15 or so, just before it says this.owner.moveTo(....), insert a line like this

wade.playAudio('mySound.ogg');

sir i want congatz to be image  then there is a button that will go to lvl2

sir my phone has 5.2 screen ...  what shud i do to make my game fir on my phone screen thank u

sir

> sir i want congatz to be image  then there is a button that will go to lvl2

If you already have an object called congratzMessage, delete it first.

Create a new scene for your lvl2. Call it lvl2.wsc

Add your image of choice to the project, then drag it into the scene. This will create a new object.

Rename it to congratzMessage (set the name in the Properties tab).

Go the the Functions tab, and select onMouseDown

Type the following code in there:

wade.clearScene();
wade.loadScene('lvl2.wsc');

> sir my phone has 5.2 screen ...  what shud i do to make my game fir on my phone screen thank u

You don't need to worry about the screen size, WADE will resize your game to fit on any device. You just have to set some numbers in the Scene Properties.

For each scene:

Check the size of your background. Also check that it's position is exactly 0, 0. This can be seen in the Properties tab of the background object.

In the Scene Properties, on the top-right of your screen when no object is selected, edit both Min Size and Max Size to match the size of your background. You should use the same numbers in Min Size and Max SIze, as in this picture but using your background size

thank  you sir..    i have question ...  if player click the object -> text will appear.. like if player click the bottle... after that a text will appear "bottle" then it will disappear again,,, could it be done?

sir how about... the bg music stop when its in the other scene? like in my 1st scene i have bgmusic then 2nd scene i can still hear the bg music of  the 1st scene.. how to stop it ?

var firework = wade.getSceneObject("firework").clone();
    firework.setPosition(ts.getPosition());
    wade.addSceneObject(firework ,true);
    firework.playAnimation("firework");

i cant make the firework animation

sir my professor said my game needs to have like 3 lifepoints , if the player click the wrong object .for example in lvl1 find 5 biodegradable .... then he clicked the non biodegradable object or he only clicked the background.. the lifepoints with decreas to 1.. is that posible sir?   

sir i don t understand about the congratz message i think there's something wrong. anad i cant rename the new object to congratzMessage

sir whats wrong with this images i cant make the lvl2 hidden objects

garbage only

bg

waiting for all your replies sir thank you

> how about... the bg music stop when its in the other scene

Like I said above, in your "other scene", you should add a flow chart - this is the same thing you have done for playing the bg music. But this time, use a box called "Stop bg music". This should stop your music when the "other scene" is loaded.

> sir whats wrong with this images i cant make the lvl2 hidden objects

All your images must be png. It looks like you have one jpg there. Because jpg is a lossy form of compression, it will introduce artefacts that will make it impossible to extract the difference between two images. To be clear, do not convert your jpg to png - this will not work. Make that picture from scratch, and save it as png.

> i cant rename the new object to congratzMessage

You may have encountered a bug there. Could you refresh the editor page and try again? I'll try to fix the bug properly so it doesn't happen again - however refreshing the page should fix it for you.

> i cant make the firework animation

I need to know more to be able to help you with this. Do you have an object named "firework" in your scene? Do you get any errors in the console?

> game needs to have like 3 lifepoints , if the player click the wrong object .for example in lvl1 find 5 biodegradable .... then he clicked the non biodegradable object or he only clicked the background

First you need to initialise your lifepoints variable. A good place to do this is in the timeline for your scene, at time 0, like this:

Then for each object that makes the player lose a life point, select it, go to its Functions tab, then select onMouseDown and type in this code:

if (--wade.app.lifePoints == 0)
{
    wade.clearScene();
    wade.loadScene('gameOver.wsc');
}
return true;

Obviously this will only work properly if you have a scene called gameOver.wsc

sir i think it cant detect the base image of this ... whats wrong wtih this

That picture is alright, there is nothing wrong with it

congratzMessage still not working     

wade.clearScene('scene2.wsc');
wade.loadScene('congratz.wsc');

onmousedown .. right sir?

maybe its wrong to delete my first congratzMessage object on scene2?

sir i ddnt use congratz.wsc now...   i only change the text to image when the play found all the garbages ,, image visible congratz.png ....  sir what to do if the congratz message will show.. i want also a button image to show (click to play lvl2)

i mean sir in bg music .. when i go to scene2.. i want scene1 bg music stop and i want scene2 bgmusic play.. is it possible?

sir why is it that i just deleted 1 png file (not important) then it ruins my game.. is it bug?

why i cant click the object now sir? im sure i follow your instructions

sir need your help right now.. objectToFind true  is not working .. i need to finish this now

ill wait for your reply sir ty hays...   when i put objectToFind true in one of the garbages .. i cant click it 

> i mean sir in bg music .. when i go to scene2.. i want scene1 bg music stop and i want scene2 bgmusic play.. is it possible?

Yes. Have you tried what I suggested above? Adding a flow chart to scene2 where the only box is a "Stop bg music" box? Did that not work?

> when i put objectToFind true in one of the garbages .. i cant click it 

I don't think that just adding that property to an object will make any difference in terms of being able to click it. There must be something else going on that is not working. Do you get any errors in the console?

sir is there a problem when downloading to android? i cant hear the bg music

done putting the timeline event lifepoints but sir where can i see the lifepoints on my game screen? i followed your instructions but seems i cant click the object with this

 if (--wade.app.lifePoints === 0)
{
    wade.clearScene();
    wade.loadScene('gameOver.wsc');
}
return true;

> sir is there a problem when downloading to android? i cant hear the bg music

Has the music file been added to the scene audio files? If so, try selecting the "Web Audio Only" option in the scene properties, see if that makes a difference...

> seems i cant click the object with this

I am not sure what you want to happen when you click that object. I thought you just wanted to lose a life point, is that not happening? That is, if you click it 3 times, it's game over?

> where can i see the lifepoints on my game screen

This depends on where you want to see them. You could do the same thing that you did with your scoreText object. Follow the exact same steps as above, except this time call the object lifePointsText. In the timeline, when you set your wade.app.lifePoints to 3, do this too:

_.lifePointsText.getSprite().setText(wade.app.lifePoints);

Then in the onMouseDown function of objects that make you lose life points, change your code to this:

--wade.app.lifePoints;
_.lifePointsText.getSprite().setText(wade.app.lifePoints);
if (wade.app.lifePoints === 0)
{
    wade.clearScene();
    wade.loadScene('gameOver.wsc');
}
return true;

cannot read property 'getsprite' of undefined (sceneobjec, 

should i put this also in hiddenobject.js ?

_.lifePointsText.getSprite().setText(wade.app.lifePoints);

sir kindly enlighten me please.....

> cannot read property 'getsprite' of undefined (sceneobjec, 

Sounds like you haven't created an object called lifePointsText before doing that...

sir did u mean ill put this on timeline too 

_.lifePointsText.getSprite().setText(wade.app.lifePoints);

sir i have thats why i dont understand

sir i have thats why i dont understand

i got objects - life

> sir did u mean ill put this on timeline too 

Yes

> sir i have thats why i dont understand

From that picture, it doesn't look right. It should look the same as your scoreText (i.e. a text sprite that shows "0"). Instead, it looks like a white box... that suggests that it wasn't set up correctly. For this object, you should follow the exact same steps that you used to create your scoreText object. The only difference will be the name.

timeline

sir is it possible to make 2 characters in 1 scene that fights? still waiting for your reply... need to finish before monday

sir im interested with the space shooter game... im thinking that i want that to be my lvl3 ... the player is hte ship then the enemy ship will look like the garbage boss.. maybe coz the tutorials are missing like scores, lifepoints, and a game over scene... maybe u could jsut reply here sooo after my class i cud try to make that lvl3... but sir still the error about the lifepoints is not yet solved... sooo i will jsut wait for your reply thank you...

Sir please online

Okay
Gio posted this code a few comments back
 

--wade.app.lifePoints;
_.lifePointsText.getSprite().setText(wade.app.lifePoints);
if (wade.app.lifePoints === 0)
{
    wade.clearScene();
    wade.loadScene('gameOver.wsc');
}
return true;

and you posted
"cannot read property 'getsprite' of undefined (sceneobjec, "

Do you still have that problem, or have you got past that?

same error sir

should i rename the objects that when clicked it will be - lifepoints?

can we go back on how to add lifepoints? 1st step 

Okay, lets look at the pictures you linked

"timeline code.png"

In this image I can see you do wade.app.lifePoints = 3; That looks correct to me.

You then have some code to set the value of the text sprite. _.lifePointsText.getSprite().setText(wade.app.lifePoints);

I think that code should work. It should set the life to 3, then display that on screen where ever you have placed your text sprite, I cannot actually see it in the scene but I presume it's somewhere. 

You are telling me that it doesn't work, so we need to try and narrow it down a bit.

1. Click on your lifePointsText object so you can see the properties.
2. Make sure that addToScene button is orange. It is by default, but it may have been turned off somehow and this could cause the problem you are seeing
3. Make sure you actually have an object called lifePointsText. It is possible your code has changed since you made these images
4. Look at the sprites on the lifePointsText object. Make sure it has only 1 sprite, and make sure it is a text sprite.

If it still says "cannot getSprite() of undefined" something weird is going on and you might have to send me the code.

You can attach code the same way you attach images on this forum.  In wade, download the sourcecode of your project. You can do this by clicking the folder icon (yellow box with a green arrow near the top left) and then clicking source code. This will download a zip file. If you then attach that to your post, I will be able to see all your code and it will make it much easier for us to get it working :)

 

kindly wait sir ...   why is it that the default have changed? in properties auto listen and add to scene are not color yellow.. but please sir stay with me... final defense is on wednesday ..

I dont know why they are not yellow, it was just a guess. If you click on each it will turn them both yellow. Do you get the same error even after doing that?

40mb zip file so long to uplod .. Sir ... Do u just want me to send all my images? Game menu and hidden object bg,bg and garbage, garbage only

if you want, you can unzip the source, remove all the images and music, rezip it, and send that zip. It wont run but at lest I will be able to see all the code myself

where can we chat fast sir? or you just want us to talk here?

give me an hour sir

download package 32bit or 64 bit?

I actually finished work over an hour ago but I've quickly put together a project for you that I have attached to this post.

I made it really small so you can download it quickly. Unzip it then drag all the files into a wade project, you might have to reload the scene for it to work.
All I did was create a project with lives and 2 sprites. You click one sprite, it removes a life and updates the life display.

Edit:

More specifically, look in the app.js file, that's where I create the lives and initialise them. Also look at the onClick function for the bottom object

ill chek it sir right now.. when will u be back?

lifepoints is done sir thank you...  sir could you make me a scene with space shooter? i want it to become my last lvl ... lvl3 ...  in attachment garbage monster us the boss .. need to hit 5 times to clear the lvl.. with lifepoints 3 ... is that ok sir?

http://www.filedropper.com/mastercleanerfinaltest this is the link where i uploaded my ongoing game kindly check it sir... i think the audio file is not working coz i cant hear it... 

sir what should i do the score in lvl1 .. like lvl1 score needs 5 then in lvl2 i can see also the score 

I'm not sure what you are asking.

Do you want to reset the score at the end of each level, or something else?

yes reset sir... and also a beeping sound when object - lifepts is clicked

did you check my game sir?

Ok. I'm not sure where you change the level, but where ever that happens, you need to set the score to 0, and set the score text sprite to 0 aswell
 

wade.app.score = 0;
_.scoreText.getSprite().setText(wade.app.score);

As long as your score object is still called scoreText and has been added to the scene, this should work.
 

this.owner.objectToFind = false;
wade.app.score = (wade.app.score || 0) + 1;
_.scoreText.getSprite().setText(wade.app.score);
if (!wade.getSceneObjects('objectToFind', true).length)
{
    _.congratzMessage.setVisible(true);
    _.timer.stop();
    _.arrowbutton.setVisible(true);
}
        return true;

you want me to put that code here?

uhh i think its working

when i export to android i cant hear the audio

i dont understand sir i have 2 lvls that has lifepoints. should i code again in lvl3 ?

sir everyscene need to have hiddenObject.js? that what i did