jsantos

Members
  • Content count

    14
  • Joined

  • Last visited

  1. jsantos

    How would you approach this

    Hi Jackolantern! Thanks for your answer! As I was reading I was nodding to myself and saying "yes, that would be really nice and..." but I hit a (seemingly) wall... The objective is to wrap all in to an hybrid app. At the moment I'm using Intel's XDK with Cordova/Crosswalk... And I do share assets (images, sounds, sets of words,...) with all games. And I do want to create a separate file with all the GUI and common repeated stuff that I can just call whenever and from wherever I am. So... Do you still think it feasible with web pages and small independent games or one BIG thing with 19 plus states that are the small games? Sorry for bothering. Cheers!
  2. jsantos

    How would you approach this

    Hi all, This is a bit of a general question... Imagine that you have one game/application of sorts, like this: one main menu with access to 9 different areas; each of those 9 areas has from 1 up to 4 different "games", with up to 4 difficulty levels (each with its own main image, instructions and so on); Any of those games can be started by choosing 1 of 19 possible "keys"; ... I'm passing the keys (that control images and so on) in a .json file and using localStorage to keep the player choices and direct it to the proper place. My big question right now is: should I look at the 9 areas with different levels as being each a state inside a main project or should each be its own little project accessed by the main one? For example, main State (with Boot, Preload, ...) just for showing loader and main menu (plus help and so on) and have something like area01_game01_level01 state; area01_game01_level02 state, area01_game02_level01 state,..., area09_game01_level01; OR main, boot, preload... states and after the player choices are entered, again a main, boot, preload, etc... What's easier to maintain and more logical? Pros and cons... And why? Thanks in advance for all your ideas! Ps - For the record I already have it running in a mix of phaser and plain JS (some games) but each has its own folder and there are BIG folders for html, js, etc...I just want to improve it and make it cleaner!
  3. Yeap... This did the trick for me! function collision(){ atari.kill(); setTimeout(function() { atari.reset(250, 500); }, 1000);}The kill() working with the reset() allowed me to solve it! The rest of the code is just me checking if a word belongs or not! I'm going to mark as resolved! Cheers!!!
  4. Hi Skeptron, Thanks for looking at it! Funny enough, in those few lines may lie the answer I hadn't reset the position... or better, I had, but I also did so many other things that failed to realize that it might help me. I'll just check it a bit better and will post the result soon!
  5. Hi Skeptron! At the moment I'm a bit confused/overwhelmed because I tried so many things... I'm using revive() at the moment, but the sprite bounding box (on debug) just sticks to the target area and whenever a new image pop's up, if it is of the same type, since it's bounding box is on top of the other, happily collides :S Here's my code: var goal = false;window.onload = function () { var game = new Phaser.Game(1024, 796); var playGame = function (game) {} playGame.prototype = { preload: function () { // background and window size this.game.stage.backgroundColor = "#e5e59b"; // setting a background color this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; // using RESIZE scale mode this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setScreenSize(true); //load GUI elements this.game.load.image('next', '../../assets/imagesOther/next.png'); this.game.load.image('soundBtn', '../../assets/imagesOther/playSound2.png'); this.game.load.image('home', '../../assets/imagesOther/home.png'); this.game.load.image('marcoAzul', '../../assets/imagesOther/correioAzul.png'); this.game.load.image('marcoVermelho', '../../assets/imagesOther/correioVermelho.png'); this.game.load.image('xis', '../../assets/images/xis.png'); // load all images at once to be called by the activity for (var y = 0; y < shuffledArray.length; y++) { this.game.load.image('imgTrg' + y, '../../assets/images/' + shuffledArray[y] + '.png'); this.game.load.audio('soundTrg' + y, '../../assets/sounds/' + shuffledArray[y] + '.wav'); } this.game.load.audio('processo', '../../assets/sounds/letters/' + processo.nomeLetra + '.wav'); this.game.load.audio('facilitador', '../../assets/sounds/letters/' + sonsFacil.nomeLetra + '.wav'); this.game.load.audio('positive', '../../assets/sounds/happy.wav'); this.game.load.audio('negative', '../../assets/sounds/sad.wav'); this.number = 0; }, create: function () { // Enable the Arcade Physics system this.game.physics.startSystem(Phaser.Physics.ARCADE); // text style this.styleLabel = { font: "48px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; this.style = { font: "64px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; // GUI this.home = this.game.add.button(50, 50, 'home', this.home, this); this.nextImg = this.game.add.button(this.game.world.centerX + 330, this.game.world.centerY + 300, 'next', this.next, this); this.nextImg.anchor.setTo(0.5); this.nextImg.scale.setTo(0.15); this.clickSound = this.game.add.button(this.game.world.centerX + 330, this.game.world.centerY + 140, 'soundBtn', this.soundClick, this); this.clickSound.anchor.setTo(0.5); this.clickSound.scale.setTo(0.15); this.clickSound1 = this.game.add.button(this.game.world.centerX - 170, this.game.world.centerY - 120, 'soundBtn', this.soundClick1, this); this.clickSound1.anchor.setTo(0.5); this.clickSound1.scale.setTo(0.15); this.soundImg1 = this.game.add.audio('processo'); this.clickSound2 = this.game.add.button(this.game.world.centerX - 170, this.game.world.centerY + 240, 'soundBtn', this.soundClick2, this); this.clickSound2.anchor.setTo(0.5); this.clickSound2.scale.setTo(0.15); this.soundImg2 = this.game.add.audio('facilitador'); // Post this.marcoAzul = this.game.add.sprite(250, game.height * .22, 'marcoAzul'); this.marcoAzul.anchor.setTo(0.5); this.marcoAzul.scale.setTo(.3); this.marcoAzul.customParams = { id: 1 }; this.game.physics.enable(this.marcoAzul, Phaser.Physics.ARCADE); this.marcoAzul.body.setSize(300, 250, 0, -70); this.marcoAzul.body.immovable = true; this.marcoAzulLetter = this.game.add.text(235, game.height * .3, processo.letra, this.styleLabel); this.marcoVermelho = this.game.add.sprite(250, game.height / 1.5, 'marcoVermelho'); this.marcoVermelho.anchor.setTo(0.5); this.marcoVermelho.scale.setTo(.3); this.marcoVermelho.customParams = { id: 0 }; this.game.physics.enable(this.marcoVermelho, Phaser.Physics.ARCADE); this.marcoVermelho.body.setSize(300, 250, 0, -70); this.marcoVermelho.body.immovable = true; this.marcoVermelhoLetter = this.game.add.text(235, game.height / 1.33, sonsFacil.letra, this.styleLabel); this.image = this.game.add.sprite(game.width / 1.2, game.height / 2.5, 'imgTrg' + this.number); this.image.anchor.setTo(0.5); this.image.scale.setTo(.3); this.image.originX = this.image.x; this.image.originY = this.image.y; this.image.inputEnabled = true; this.image.input.enableDrag(true); this.image.events.onDragStop.add(this.stopDrag, this); this.game.physics.enable(this.image, Phaser.Physics.ARCADE); // initial position // target word image label this.wordImgLabel = this.game.add.graphics(); this.wordImgLabel.beginFill(0x000000, 1); this.wordImgLabel.drawRect(-300, 300, 600, 200); this.image.addChild(this.wordImgLabel); this.soundImg = this.game.add.audio('soundTrg' + this.number); this.newWordTrg = shuffledArray[this.number]; for (var i = 0; i < 25; i++) { switch (this.newWordTrg) { case "lapis": this.newWordTrg = "lápis"; break; case "ines": this.newWordTrg = "inês"; break; case "glutao": this.newWordTrg = "glutão"; break; case "iglo": this.newWordTrg = "iglô"; break; case "braco": this.newWordTrg = "braço"; break; case "laco": this.newWordTrg = "laço"; break; case "verao": this.newWordTrg = "verão"; break; case "chao": this.newWordTrg = "chão"; break; case "feijao": this.newWordTrg = "feijão"; break; case "ze": this.newWordTrg = "zé"; break; case "zangao": this.newWordTrg = "zangão"; break; case "movel": this.newWordTrg = "móvel"; break; case "sofa": this.newWordTrg = "sofá"; break; case "trofeu": this.newWordTrg = "troféu"; break; case "da": this.newWordTrg = "dá"; break; case "to": this.newWordTrg = "tó"; break; case "pe": this.newWordTrg = "pé"; break; case "pao": this.newWordTrg = "pão"; break; case "pa": this.newWordTrg = "pá"; break; case "bebe": this.newWordTrg = "bebé"; break; case "bau": this.newWordTrg = "baú"; break; case "taca": this.newWordTrg = "taça"; break; case "ra": this.newWordTrg = "rã"; break; case "mumia": this.newWordTrg = "múmia"; break; case "mao": this.newWordTrg = "mão"; break; }; } this.imageLetter = this.game.add.text(-100, 350, this.newWordTrg.toUpperCase(), this.style); this.image.addChild(this.imageLetter); this.testWord = shuffledArray[this.number]; this.imgGoal = false; this.positiveSound = this.game.add.audio('positive'); this.negativeSound = this.game.add.audio('negative'); this.timeDelay = 0; this.move = false; }, update: function () { // Physics part this.physics.arcade.overlap(this.marcoVermelho, this.image, this.collision, null, this); this.physics.arcade.overlap(this.marcoAzul, this.image, this.collision, null, this); console.log(this.image.events.onKilled); }, render: function () { this.game.debug.body(this.image); this.game.debug.body(this.marcoAzul); this.game.debug.body(this.marcoVermelho); }, wordInList: function () { for (var i = 0; i < shuffledArray.length; i++) { if (this.testWord === processo.words[i]) { this.image.customParams = { id: 1 }; break; } else if (this.testWord == sonsFacil.words[i]) { this.image.customParams = { id: 0 }; } } }, home: function () { window.location.href = '../../index.html'; }, next: function () { /* this.image.position.x = this.image.originX; this.image.position.y = this.image.originY; this.image.body.x = this.image.originX; this.image.body.Y = this.image.originY; this.image.visible = true;*/ this.timeDelay = 0; //this.image.body.enable = true; this.number += 1; this.image.loadTexture('imgTrg' + this.number); this.soundImg = this.game.add.audio('soundTrg' + this.number); this.image.revive() //this.game.physics.enable(this.image, Phaser.Physics.ARCADE); this.testWord = shuffledArray[this.number]; this.newWordTrg = shuffledArray[this.number]; for (var i = 0; i < 25; i++) { switch (this.newWordTrg) { case "lapis": this.newWordTrg = "lápis"; break; case "ines": this.newWordTrg = "inês"; break; case "glutao": this.newWordTrg = "glutão"; break; case "iglo": this.newWordTrg = "iglô"; break; case "braco": this.newWordTrg = "braço"; break; case "laco": this.newWordTrg = "laço"; break; case "verao": this.newWordTrg = "verão"; break; case "chao": this.newWordTrg = "chão"; break; case "feijao": this.newWordTrg = "feijão"; break; case "ze": this.newWordTrg = "zé"; break; case "zangao": this.newWordTrg = "zangão"; break; case "movel": this.newWordTrg = "móvel"; break; case "sofa": this.newWordTrg = "sofá"; break; case "trofeu": this.newWordTrg = "troféu"; break; case "da": this.newWordTrg = "dá"; break; case "to": this.newWordTrg = "tó"; break; case "pe": this.newWordTrg = "pé"; break; case "pao": this.newWordTrg = "pão"; break; case "pa": this.newWordTrg = "pá"; break; case "bebe": this.newWordTrg = "bebé"; break; case "bau": this.newWordTrg = "baú"; break; case "taca": this.newWordTrg = "taça"; break; case "ra": this.newWordTrg = "rã"; break; case "mumia": this.newWordTrg = "múmia"; break; case "mao": this.newWordTrg = "mão"; break; }; } this.imageLetter.setText(this.newWordTrg.toUpperCase()); }, soundClick: function () { this.soundImg.play(); }, soundClick1: function () { this.soundImg1.play(); }, soundClick2: function () { this.soundImg2.play(); }, collision: function (item, image) { this.wordInList(); if (item.customParams.id == image.customParams.id) { goal = true; this.replaceIt(); } /* if (goal) { if (this.game.time.now > this.timeDelay) { // wait 1 second this.timeDelay = this.game.time.now + 10000 this.positiveSound.play(); } goal = false; } else { if (this.game.time.now > this.timeDelay) { this.negativeSound.play(); // wait 1 second this.timeDelay = this.game.time.now + 1000 } }*/ }, replaceIt: function () { console.log('yeah!!!'); //this.positiveSound.play(); this.image.kill(); goal = false; }, stopDrag: function () { if (this.image.x != this.marcoAzul.x || this.image.y != this.marcoAzul.y || this.image.x != this.marcoVermelho.x || this.image.y != this.marcoVermelho.y) { this.image.x = this.image.originX; this.image.y = this.image.originY; } }, } game.state.add("PlayGame", playGame); game.state.start("PlayGame");}Thanks for your time!
  6. Hi all! I just read a ton of posts/google finds but still no answer to me. My problem is this: I have an image, with arcade physics on it. On my update I'm checking overlap, since I'm dragging the image. If it touches the right obstacle, it should disappear, if it's the wrong one, it should go back to the previous place (origin). Everything works fine except the "disappearing act": - If I use: this.image.visible = false;// reposition imagethis.image.x = this.image.originX;this.image.y = this.image.originY;I keep hearing the sound fx of the correct answer, until I press the next button (by the way, I know I can delay the sound or use some kind of trigger to avoid it playing over and over, I just would want it to allow the image to re-position itself) but the next button sometimes but fails to address the following line of code: this.image.visible = true;And that makes it jump over one image from a set of images (when I press next I also increment by one the a value that I use to loop through an array). This behavior happens a lot of times... more than 6 in a set of 20! If I use kill, everything works fine: - image will disappear; - sound will play only once; - next image will appear where it is supposed to appear; HOWEVER... the image now generated doesn't overlap. If I run the render function / debug, I can see that the green collision square is still in the same place where it successfully collided the 1st time. I tried reset(ting), re-enabling, re-creating... best I could achieve was the green collision square going to the right place but not following the drag... :S Destroy is imilar or worse even, in my case... Any hints, tips, ideas? Thanks for your time! Cheers!
  7. jsantos

    Best approach to puzzle group drag

    Hi all! Just to close this topic in a way... I ended up not using groups. Instead I used addChild() to add the top image to the bottom image and since now I have "normal" pairs of images, I can still drag them around, as needed. Not the most elegant or resource friendly, maybe... but gets the job done! Cheers!
  8. jsantos

    Best approach to puzzle group drag

    I did a bit more digging and elbow grease and added this: fixedGrp.setAll('anchor.x', 0.5); fixedGrp.setAll('anchor.y', 0.5); for(var i = 0; i < 3; i++){ if(i == 0){ fixedGrp.create(68, 68, 'piece1'); }else if(i == 1){ fixedGrp.create(68, 318, 'piece1'); }else if(i == 2){ fixedGrp.create(68, 568, 'piece1'); } } fixedGrp.forEach(function(size){ size.scale.setTo(0.5, 0.5); });So now the scaling and spacing of the pieces are like I wanted. The scale was a mistake on my part that I realized a bit later... ps - edit because I mistyped a word
  9. Hi all! I'm currently working on an activity for children. - They have a set of puzzle pieces (more a Tangram really). One of those pieces is fixed, the other they can drag around. Each piece will feature an image, randomly selected, that is a pair with another image placed on a fixed piece; So far I have the image sorting done (it's an array of words, that correspond to an image and sound that have the exact same naming convention. Whenever you pick an even number, you'll get the even number plus one - pairs ) I have the general event.onInputDown sorted from a previous activity I tackled (just needs a few tweaks). My issue at the moment is with the puzzle pieces + image: I think I should make them as groups: one for the fixed pieces, one for the moving pieces; I will create a new element/child(?) of each group, at position x, y). Issue: scale the puzzle pieces... I tried setAll(0.5, 0.5); tried anchor... then read groups don't really have anchors so ... Whatever I tried I only got, as a result, that the puzzle pieces seemed to stretch and move outside the game area... I need to add the randomly selected images on top of the moving pieces of puzzle and be able to drag the entire thing on one go... I have established on my script the variables for the groups and image. I tried the code below (trying/testing with just one element each at the time): fixedGrp = game.add.group();puzzleGrp = game.add.group(); for(var i = 0; i < 3; i++){ if(i == 0){ fixedGrp.create(68, 68, 'piece1'); }else if(i == 1){ fixedGrp.create(68, 318, 'piece1'); }else if(i == 2){ fixedGrp.create(68, 568, 'piece1'); } } // should use a for as above puzzleGrp.enableBody = true; puzzleGrp.physicsBodyType = Phaser.Physics.ARCADE; puzzleGrp.create(900, 68, 'piece2'); //puzzleGrp.scale.setTo(0.5, 0.5); image = this.game.add.sprite(1020, 170, 'randomImg', puzzleGrp); image.width = puzzleGrp.width; image.height = puzzleGrp.height; image.inputEnabled = true; image.input.enableDrag(false, true);My idea is that the image will be part of the group and when I drag it, it will bring the group over with it. However... again my scaling attempts fail and I can only drag the image. Any pointers would be appreciated. Cheers! edit: Mistake on post name
  10. Stauzs! Sorry man, you're right! I re-checked and I was missing the line in the tutorial! Sorry...
  11. Mmmm... ok! I was indeed following it but it just worked after your console.log and/or after adding the destroyBlocks method. The rest of the time whenever Guntis pressed open Game mine would just get stuck! But no worries, it is working and I see what you mean about defining the function! Thanks!
  12. Ahhhh! Cheers Stauzs!!! The video and the new tutorial - "SockMan" don't show it... So I need to use a console.log to "initialize/use" (let's say...) the character and the block arguments... this is kind of a "hack" right? Because (please correct me if I'm wrong) console.log has no other use than to display something... Nice, I like it! Now it's working! Many thanks!
  13. Hi all! First off, let me say that MightyEditor is really really cool! I'm enjoying a lot the graphic nature of it and how easy and quick it is to see something happening! Now my problem: When following along "Digger", at this moment: this.game.physics.arcade.collide(this.character, this.blocks.self, function(character, block), null, this);I ended up getting the error "character is defined but never used"... this has to do with passing character has an argument to the function, I think but how to solve it? Thanks in advance! Cheers!