OwlCyberSecurity - MANAGER

Edit File: titlescreen.js

var titlescreen = function(game) { var BgMusic; var PlaySfx; var StarsueSfx; MuteBool = false; } /*Note: I Separated the x and y so that you can set it easily and avoid confussion. But, you can also do it this way, Example: Background = this.add.image(-248,-485,"background"); ^x ^y ^source name - you can find it in the preload.js */ titlescreen.prototype = { create: function() { this.game.stage.smoothed = false; //add the background music BgMusic = this.add.audio("backgroundmusic"); //.loop = true will make the background music loop BgMusic.loop = true; //set the BgMusic volume to 0.7. 1 is default BgMusic.volume = 0.7; //we then play the background music BgMusic.play(); //add the Play button sound effects PlaySfx = this.add.audio("playsfx"); //add the starsue logo sound effects in the dress up scene StarsueSfx = this.add.audio("starsuesfx"); /*I added this two variables for you to save some time typing this.world.centerX and centerY to make the graphics appear in the middle of the screen*/ CenterX = this.world.centerX; CenterY = this.world.centerY; //add the Background image Background = this.add.image(0,0,"background"); //set the Background image x and y Background.x = -248; Background.y = -485; //Doll //add Extras. Extras are her wings Extras = this.add.sprite(0,0,"extras01"); /*anchor.setTo will set the anchor position of the graphics, we use 0.5 for both x and y to anchor it at the middle of the graphics*/ Extras.anchor.setTo(0.5,0.5); // ^x ^y Extras.x = 1010; Extras.y = 346; //add the hair Hair = this.add.sprite(0,0,"hair01_0010"); Hair.anchor.setTo(0.5,0.5); Hair.x = 1050; Hair.y = 423; //add the body of the doll Body = this.add.sprite(0,0,"body0004"); Body.anchor.setTo(0.5,0.5); Body.x = CenterX; Body.y = CenterY; //add her clothes Clothes = this.add.sprite(0,0,"dress0001"); Clothes.anchor.setTo(0.5,0.5); Clothes.x = 1188; Clothes.y = 787; /*add the white of her eyes, I separated it so that we can sort the depth of the graphics easily*/ Eyes_White = this.add.sprite(0,0,"eyes_white"); Eyes_White.anchor.setTo(0.5,0.5); Eyes_White.x = 963; Eyes_White.y = 244; /*add her left eye. I also made her left and right eye on a separate graphics so that we can customize her eyes as we wanted*/ Eye_Left = this.add.sprite(0,0,"eye_left0008"); Eye_Left.anchor.setTo(0.5,0.5); Eye_Left.x = 931; Eye_Left.y = 246; //add her right eye Eye_Right = this.add.sprite(0,0,"eye_right0008"); Eye_Right.anchor.setTo(0.5,0.5); Eye_Right.x = 998; Eye_Right.y = 243; /*add face details. This includes the eyes and nose outline, eyebrows, and eye details*/ Face_Details = this.add.sprite(0,0,"face_details"); Face_Details.anchor.setTo(0.5,0.5); Face_Details.x = 961; Face_Details.y = 241; //add her lips Lips = this.add.sprite(0,0,"lips01_0006"); Lips.anchor.setTo(0.5,0.5); Lips.x = 971; Lips.y = 294; //add her teeth. I separated the teeth from the lips to make it more customizable Teeth = this.add.sprite(0,0,"teeth01"); Teeth.anchor.setTo(0.5,0.5); Teeth.x = 973; Teeth.y = 303; //add her bangs Bang = this.add.sprite(0,0,"bang01_0010"); Bang.anchor.setTo(0.5,0.5); Bang.x = 963; Bang.y = 294; /*and finally, we make a group to store all of the doll's assets (hair,eyes,dress,etc.) and then add all of the doll's body parts inside this group so that we can change the doll's size and x and y position easily.*/ Character_Group = this.add.group(); Character_Group.add(Extras); Character_Group.add(Hair); Character_Group.add(Body); Character_Group.add(Clothes); Character_Group.add(Eyes_White); Character_Group.add(Eye_Left); Character_Group.add(Eye_Right); Character_Group.add(Face_Details); Character_Group.add(Lips); Character_Group.add(Teeth); Character_Group.add(Bang); Character_Group.x = -2500; Character_Group.y = -420; //comment out this group scaling before using the this.debug_fnc(<Image>); /*you can also not comment this out but it will become a little bit tricky moving the graphics to a new position*/ Character_Group.scale.setTo(3.03,3.03); //add the title of the game Title = this.add.image(0,0,"title"); Title.anchor.setTo(0.5,0.5); Title.x = 1460; Title.y = 679; //add the Play Button sprite Play_Btn = this.add.sprite(0,0,"play_btn"); Play_Btn.anchor.setTo(0.5,0.5); Play_Btn.x = 1210; Play_Btn.y = 1132; Play_Btn.inputEnabled = true; Play_Btn.events.onInputDown.add(function() { //scaled down the button to make a shrinking effect when we hold down the button Play_Btn.scale.setTo(0.9,0.9); },this); Play_Btn.events.onInputUp.add(function() { PlaySfx.play(); Play_Btn.scale.setTo(1,1); this.state.start("DressUp"); },this); Credits_Btn = this.add.button(0,0,"credits_btn",function() { //hide the Credits_Btn Credits_Btn.visible = false; //make the Credits_Group visible Credits_Group.visible = true; //disable all buttons that is not meant to be clickable when Credits shows up Play_Btn.inputEnabled = false; Starsue_Logo.inputEnabled = false; Starsue_Mascot.inputEnabled = false; },this); Credits_Btn.anchor.setTo(0.5,0.5); Credits_Btn.x = 1652; Credits_Btn.y = 1164; //events.onInputDown will be triggered when the user press on the close button Credits_Btn.events.onInputDown.add(function() { //scaled down the button to make a shrinking effect when we hold down the button Credits_Btn.scale.setTo(0.9,0.9); },this); //events.onInputUp will be triggered when the user releases the mouse click on the close button Credits_Btn.events.onInputUp.add(function() { //scaled the button back to it's normal size Credits_Btn.scale.setTo(1,1); },this); //add the Starsue logo Starsue_Logo = this.add.button(0,0,"starsue_btn",function() { //this will open a new window when we click this button //you can change the link, but make sure the link is inside the quotes "<link>" window.open("http://www.starsue.net/","_blank"); },this); Starsue_Logo.anchor.setTo(0.5,0.5); Starsue_Logo.x = 1377; Starsue_Logo.y = 1372; Starsue_Logo.animations.add("StarsueAnim",[0,1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15,16,17,18,19,20, 21,22,23,24,25,26,27,28,29, 29,29,29,29,29,29,29,29,29,29, 29,29,29,29,29,29,29,29,29,29, 29,29,29,29,29,29,29,29,29,29, 29,29,29,29,29,29,29,29,29,29],30,true); Starsue_Logo.animations.play("StarsueAnim"); //StarSue Mascot button and it's animation Starsue_Mascot = this.add.button(0,0,"starsue_mascot",function() { //this will open a new window when we click this button //you can change the link, but make sure the link is inside the quotes "<link>" window.open("http://www.starsue.net/online-games/Ever_After_High_Games.html","_blank"); },this); Starsue_Mascot.anchor.setTo(0.5,0.5); Starsue_Mascot.x = 1773; Starsue_Mascot.y = 1320; /*animation for the starsue mascot. I repeated some of the mascot's frame to give it a time to not blink. We did it this way to reduce the file size of the starsue_mascot.png. Spritesheets in Phaser starts with 0, so for example you have 10 frames in a spritesheet, you will start the animation in frame 0 and work your way up to 9. The number 50 is the frames per second the animation will play and finally the true parameter is a boolean for looping the animation, if it is set to false, then the animation will only play once*/ Starsue_Mascot.animations.add("MascotAnim",[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0, 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15, 16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16, 16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16, 16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16, 17,18,19,20,21,22,23,24,25,26,27, 28,29,30,31,32,33,34,35,36,37,38,39,40,41, 42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42, 42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42],50,true); //Play Starsue_Mascot's animation Starsue_Mascot.animations.play("MascotAnim"); //---------------------------------------------------------// //Credits Screen //Screen_Effect (black screen at the back of the credits screen) //the first 0 is the x and the second 0 is the y Screen_Effect = this.add.sprite(0,0,"screen_effect"); //Credits_Text includes the credits text and the pink border Credits_Text = this.add.sprite(0,0,"credits_text"); Credits_Text.anchor.setTo(0.5,0.5); Credits_Text.x = CenterX; Credits_Text.y = CenterY - 120; //Starsue logo button in the credits screen Starsue_Credits = this.add.button(0,0,"starsue_credits",function() { //this will open a new window when we click this button //you can change the link, but make sure the link is inside the quotes "<link>" window.open("http://www.starsue.net/","_blank"); },this); Starsue_Credits.anchor.setTo(0.5,0.5); Starsue_Credits.x = 392; Starsue_Credits.y = 1055; //Winx Club logo button Winx_Club_Credits = this.add.button(0,0,"winx_club_credits",function() { //this will open a new window when we click this button //you can change the link, but make sure the link is inside the quotes "<link>" window.open("http://www.winxclub.com/en","_blank"); },this); Winx_Club_Credits.anchor.setTo(0.5,0.5); Winx_Club_Credits.x = 1045; Winx_Club_Credits.y = 1040; //Rainbow logo button Rainbow_Logo = this.add.button(0,0,"rainbow_logo",function() { //this will open a new window when we click this button //you can change the link, but make sure the link is inside the quotes "<link>" window.open("http://www.rbw.it/en/","_blank"); },this); Rainbow_Logo.anchor.setTo(0.5,0.5); Rainbow_Logo.x = 1612; Rainbow_Logo.y = 1037; //Close button at the upper right corner of the Credits_Text /*We add it as a sprite so that we can make it zoom in and zoom out by scaling it when the user click the close button*/ Close_Btn = this.add.button(0,0,"close_btn",function() { //we make the Credits_Group invisible and the Credits_Btn visible again Credits_Group.visible = false; Credits_Btn.visible = true; //enable all buttons that is meant to be clickable when Credits is closed Play_Btn.inputEnabled = true; Starsue_Logo.inputEnabled = true; Starsue_Mascot.inputEnabled = true; },this); Close_Btn.anchor.setTo(0.5,0.5); Close_Btn.x = 1697; Close_Btn.y = 309; //events.onInputDown will be triggered when the user press on the close button Close_Btn.events.onInputDown.add(function() { //scaled the button down to make a shrinking effect when we hold down the button Close_Btn.scale.setTo(0.9,0.9); },this); //events.onInputUp will be triggered when the user releases the mouse click on the close button Close_Btn.events.onInputUp.add(function() { //we scale the button back to it's original size to make an unpressed animation Close_Btn.scale.setTo(1,1); },this); //Group that will hold all the graphics that we need for the credits screen Credits_Group = this.add.group(); Credits_Group.add(Screen_Effect); Credits_Group.add(Credits_Text); Credits_Group.add(Starsue_Credits); Credits_Group.add(Winx_Club_Credits); Credits_Group.add(Rainbow_Logo); Credits_Group.add(Close_Btn); //we make it initially invisible to hide it from the users view Credits_Group.visible = false; //add Sound_Btn Sound_Btn = this.add.button(0,0,"sound_btn", function() { /*if MuteBool is false then we make the Sound_Btn show the sound off graphics by going to frame number 1 of the spritesheet and setting the background music's volume to 0*/ if(!MuteBool) { Sound_Btn.frame = 1; BgMusic.volume = 0; MuteBool = true; } /*if MuteBool is true then we make the Sound_Btn show the sound on graphics by going to frame number 0 of the spritesheet and setting the background music's volume to default, which is 1*/ else if(MuteBool) { Sound_Btn.frame = 0; BgMusic.volume = 0.7; MuteBool = false; } },this); Sound_Btn.anchor.setTo(0.5,0.5); Sound_Btn.x = 50; Sound_Btn.y = 41; /*PosText will print the X and Y of the image that you will add in this.debug_fnc(<Image>);*/ /*PosText = this.add.text(1680,110,"X:" + "\n" + "Y:",{font:"100px Arial",fill:"000000"}); PosText.anchor.setTo(0.5,0.5);*/ }, update: function() { }, /*I created this debugger so you can easily drag and drop any images that you wanted to get the x and y. To use this, simply add this.debug_fnc(<Image>); anywhere in the create function. Note: if you are going to use this on a button or an image/sprite that is clickable, please disable/comment out the button's function first so that it will not interfere with this debugger. And if you are going to sell, distribute or publish this game, please delete this debugger and PosText to avoid errors in the game. Thank you! :) */ debug_fnc: function(Obj) { // ©Francis Paul Perez Obj.inputEnabled = true; Obj.input.enableDrag(false); Obj.events.onInputUp.add(function() { /*console.log("X = "+Obj.x); console.log("Y = "+Obj.y);*/ PosText.text = "X: " + Obj.x + "\n" + "Y: " + Obj.y; },this); }, }