WholemealDrop

Members
  • Content count

    14
  • Joined

  • Last visited

About WholemealDrop

  • Rank
    Member

Profile Information

  • Gender
    Male
  • Location
    Twin Cities
  • Interests
    paintball, cars, music, video games (Action/adventure, racing, shooters)
  1. WholemealDrop

    Button Hove Effect Isn't Working

    I tried that but it shouldn't need one. frame 1 should be hoverOver, frame 0 should be notOver, and frame 2 should be isDown. Just can't figure out how I only get a hover state if I hold down the mouse button.
  2. WholemealDrop

    Button Hove Effect Isn't Working

    Continuation of my Phaser game that I've been working on for the last few months. Working on a menu system now and trying to polish up the buttons with a hover state. I based my button code off of the example from Phaser. My issue stems from it doesn't work as it should. Right now it doesn't do any hover over change unless you hold down the mouse button and then move your mouse off and on the button. So rather than being able to change between the over and out images and then on click images it currently only has a change for on click and if you hold down the mouse button on a button and move the cursor out and over the button it changes.I know it is super wordy but I don't know how else to explain it. Here is my code: var newgameButton; this.newgameButton = this.game.add.button(50, 50, 'NewGame', this.newGameOnClick, this, 1, 0, 2); this.newgameButton.onInputOver.add(this.over, this); this.newgameButton.onInputOut.add(this.out, this); this.newgameButton.onInputUp.add(this.up, this); up: function() { console.log('button up', arguments); }, over: function() { console.log('button over'); }, out: function() { console.log('button out'); }, newGameOnClick: function() { this.game.state.start('LevelTut'); },
  3. WholemealDrop

    Animation Issues

    OMG duh! Thanks samme!
  4. WholemealDrop

    Animation Issues

    I'm working on a dungeon/cave exploration game and created some torches to scatter throughout the gamespace to guide the player via a tutorial here: Game Mechanic Explorer Lighting. Got the lighting working wonderfully finally but when I try to animate the sprite linked to the torches nothing happens or it breaks the game. I've tried standard animation add and play calls along with the shown callAll animation.Both animations and callAll throws errors of cannot read property animations/callAll of undefined. Any thoughts as to why I can't get the torch to animate? Relevant code below (my game is broken out to gamestates so assume that the sprite calls for the preload are correct): var PrototypeMaze = PrototypeMaze || {}; PrototypeMaze.Game = function() {}; PrototypeMaze.Level1 = { create: function() { // Create torch objects // Torch constructor var torch = function(game, x, y) { Phaser.Sprite.call(this, game, x, y, 'torch'); // Set the pivot point for this sprite to the center this.anchor.setTo(0.5, 0.5); }; // Torches are a type of Phaser.Sprite torch.prototype = Object.create(Phaser.Sprite.prototype); torch.prototype.constructor = torch; //Tilemap setup var map; var layer; //specify the tile size here or we can't render it this.map = this.game.add.tilemap('L1Map', 64, 64); // Now add in the tileset this.map.addTilesetImage('tiles'); // Create our layer this.layer = this.map.createLayer(0); // Resize the world this.layer.resizeWorld(); //Set wall collision with tilemap this.map.setCollisionBetween(1, 1); // //animation for torch //this.torches.callAll('animations.add', 'animations', 'flicker', [0, 1, 2], 3.5, true); //this.torches.callAll('animations.play', 'animations', 'flicker'); this.torches.animations.add('flicker', [0, 1, 2], 3.5, true); this.torches.animations.play('flicker'); //add torch group this.torches = this.game.add.group(); this.torches.add(new torch(this.game, 500, 100)); this.torches.add(new torch(this.game, 500, 400)); // The radius of the circle of light this.LIGHT_RADIUS = 150; // Create the shadow texture this.shadowTexture = this.game.add.bitmapData(2560, 3008); // Create an object that will use the bitmap as a texture var lightSprite = this.game.add.image(0, 0, this.shadowTexture); // Set the blend mode to MULTIPLY. This will darken the colors of // everything below this sprite. lightSprite.blendMode = Phaser.blendModes.MULTIPLY; }, update: function() { //tilemap collision this.game.physics.arcade.collide(this.mainChar, this.layer); // Update the shadow texture each frame this.updateShadowTexture(); }, render: function() { }, updateShadowTexture: function() { // This function updates the shadow texture (this.shadowTexture). // First, it fills the entire texture with a dark shadow color. // Then it draws a white circle centered on the pointer position. // Because the texture is drawn to the screen using the MULTIPLY // blend mode, the dark areas of the texture make all of the colors // underneath it darker, while the white area is unaffected. // Draw shadow, rgb dictates how dark the shadow is this.shadowTexture.context.fillStyle = 'rgb(100, 100, 100)'; this.shadowTexture.context.fillRect(0, 0, 2560, 3008); //Draw circle of light around torch this.torches.forEach(function(torch) { var radius = this.LIGHT_RADIUS + this.game.rnd.integerInRange(1, 10); var gradient = this.shadowTexture.context.createRadialGradient(torch.x, torch.y, this.LIGHT_RADIUS * 0.75, torch.x, torch.y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)'); this.shadowTexture.context.beginPath(); this.shadowTexture.context.fillStyle = gradient; this.shadowTexture.context.arc(torch.x, torch.y, this.LIGHT_RADIUS, 0, Math.PI * 2); this.shadowTexture.context.fill(); }, this); // Draw circle of light around companion var radius = this.LIGHT_RADIUS + this.game.rnd.integerInRange(1, 10); var gradient = this.shadowTexture.context.createRadialGradient(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS * 0.75, this.sideChar.x, this.sideChar.y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)'); this.shadowTexture.context.beginPath(); this.shadowTexture.context.fillStyle = gradient; this.shadowTexture.context.arc(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS, 0, Math.PI * 2); this.shadowTexture.context.fill(); // This just tells the engine it should update the texture cache this.shadowTexture.dirty = true; }, };
  5. WholemealDrop

    Sprite movement options?

    Thanks matt! Didn't think to have a function call on each update to change the motion.
  6. WholemealDrop

    Sprite movement options?

    Trying to setup different movement options for enemies in my Paddle game. Right now I have all 4 enemies initiating in a random y location and with random velocity.x/.y and set to bounce on the world sides from the right side of the screen to the left. I'd like to set up completely different movements for all 4 enemies but I've struck out on finding anything describing anything besides linear movement. Anyone know some good tutorials on how to do setup different movements?
  7. WholemealDrop

    [Phaser] [App] Trump on Top - NEW web version

    Neat art and concept but the AI is OP to the point that I either don't have to do anything and they will kill themselves or regardless what I do I lose both rounds with minimum damage. Don't know what you values are for them but it felt more like outcome was random based on the AI player rather than my inputs.
  8. WholemealDrop

    Reset game time when game state changes

    I'll have to look into iterating my dustParticle groups as an array. Probably going to have to redo my timers as well since this.world.removeAll( ) doesn't do anything.
  9. WholemealDrop

    Reset game time when game state changes

    I added this code based on an example and then extended it for additional enemies so that's why I didn't use a timed event because the exampled didn't use one. And sorry, nextDust[1-4]At is defined at each group as an int in MS of time. So after an allotted time, a new dust should be created. If this is unclear, here is my git repo of it: DustPong2.0 I honestly didn't think my code was that bad looking (my manager said it looked great!) I know it isn't perfect since it has been years since I did JavaScript and this is my first Phaser project. I do appreciate the feedback though!
  10. WholemealDrop

    Reset game time when game state changes

    I have finally gotten my game to a spot I'm very happy with after refactoring my code to use groups rather than individual instances of enemies. Once bug I found once doing this was that when the GameOver state is called, all 4 of my groups deploy an enemy at once rather than on a time delay like when you first load the game. I tried using time reset and removeAll from Time.js but kept getting errors due to things not being defined from the Time.js code. Any help would be appreciated. Here is where I am using time if (this.nextDustAt < this.time.now && this.dustPool.countDead() > 0){ this.nextDustAt = this.time.now + this.dustDelay; var dust = this.dustPool.getFirstExists(false); dust.reset((this.game.width-100), Math.floor(Math.random() * this.game.height)); dust.body.velocity.setTo(this.game.rnd.integerInRange(150,400)*-1), this.game.rnd.integerInRange(150,400); } if (this.nextDust2At < this.time.now && this.dustPool2.countDead() > 0){ this.nextDust2At = this.time.now + this.dustDelay2; var dust2 = this.dustPool2.getFirstExists(false); dust2.reset((this.game.width-100), Math.floor(Math.random() * this.game.height)); dust2.body.velocity.setTo(this.game.rnd.integerInRange(250,500)*-1), this.game.rnd.integerInRange(250,500); } if (this.nextDust3At < this.time.now && this.dustPool3.countDead() > 0){ this.nextDust3At = this.time.now + this.dustDelay3; var dust3 = this.dustPool3.getFirstExists(false); dust3.reset((this.game.width-100), Math.floor(Math.random() * this.game.height)); dust3.body.velocity.setTo(this.game.rnd.integerInRange(350,600)*-1), this.game.rnd.integerInRange(350,600); } if (this.nextDust4At < this.time.now && this.dustPool4.countDead() > 0){ this.nextDust4At = this.time.now + this.dustDelay4; var dust4 = this.dustPool4.getFirstExists(false); dust4.reset((this.game.width-100), Math.floor(Math.random() * this.game.height)); dust4.body.velocity.setTo(this.game.rnd.integerInRange(450,700)*-1), this.game.rnd.integerInRange(450,700); } And here is where I am calling GameOver //Check if lives = 0, run game over or new dust livesCheck: function(){ if (this.lives === 0) { this.gameOver(); } }, //game over, restart gameOver: function() { //pass it the score as a parameter this.game.state.start('GameOver', true, false, this.score); },
  11. WholemealDrop

    Trouble with Phaser in Pong like game

    Fixed it by switching to phaser.js rather than phaser.min.js, for whaterver reason min.js has issues listed above. This solved my loading issues but I still can't figure out why my paddle can't collide with dustParticle.
  12. WholemealDrop

    Trouble with Phaser in Pong like game

    Also been having trouble with my paddle not recognizing collision or overlap with the dustParticle but dustParticle does recognize collision with iWall. Can't figure out why the paddle acts as a transparent object.
  13. WholemealDrop

    Trouble with Phaser in Pong like game

    phaser.min.js:14 Uncaught TypeError: Cannot read property 'x' of undefined
  14. WholemealDrop

    Trouble with Phaser in Pong like game

    Hey all, just started programming with Phaser and I'm still trying to get the hang of it. I fiddled around with with the sandbox environment and then decided to switch over to Sublime for easier formatting. I had a few issues with my game in the sandbox that I couldn't figure out and was going to be my main question but now my issue is that when I test my game in Chrome/Safari it doesn't display anything. I built it procedurally so I could verify that things were working and the only thing that ever worked was displaying my score and lives counters. In sandbox I had much more working so I can't figure out what is going on. Any tips or tricks that could help me remedy this would be awesome. I've scoured my code and can't find anything wrong but I know how it goes when staring at the same code for hours on end. Forgot to add details about the game. It is a Pong like game where the player has a paddle on the left side of the screen that they can move up and down using the arrow keys. They will use this paddle to block dust particles coming from the right side of the screen from getting by. Here is my .html <!DOCTYPE HTML> <html> <head> <title>dustPong</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 0;} </style> </head> <body> <h1>dustPong</h1> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { //load images game.load.image('paddle', 'images/paddle.png'); game.load.image('bg', 'images/bg.png'); game.load.image('dustParticle', 'images/dustParticle.png'); } //varibales needed for objects var cursors; var paddle; var iWall; var dustParticle; //variables for text var lives = 5; var livesText; var score = 0; var scoreText; var introText; var outroText; function create() { //Display starting lives and score text scoreText = game.add.text(680, 550, 'Score: 0', { font: "20px Arial", fill: "#ffffff", align: "left" }); livesText = game.add.text(32, 550, 'Lives: 5', { font: "20px Arial", fill: "#ffffff", align: "left" }); // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); // Make things a bit more bouncey game.physics.p2.defaultRestitution = 0.8; // Add a sprite paddle = game.add.sprite(100, game.world.centerY, 'paddle', 'images/paddle.png'); paddle.anchor.setTo(0.5, 0.5); // Enable if for physics. This creates a default rectangular body. game.physics.p2.enable(paddle); // Modify a few body properties paddle.body.setZeroDamping(); paddle.body.fixedRotation = true; //player input cursors = game.input.keyboard.createCursorKeys(); //Invisible hitbox for dustParticle to collide with iWall = game.add.sprite(1, 200, 'iWall'); iWall.name = 'iWall'; game.physics.enable(iWall, Phaser.Physics.ARCADE); iWall.body.setSize(1, 600, 1, -200); iWall.body.immovable = true; //create dustParticle, give it random velocity and starting location dustParticle = game.add.sprite(700, Math.floor(Math.random() * (600)), 'dustParticle'); dustParticle.name = 'dustParticle'; game.physics.enable(dustParticle, Phaser.Physics.ARCADE); dustParticle.body.velocity.setTo(Math.floor(Math.random() * (300)+50)*-1,Math.floor(Math.random() * (300)+50)*-1); dustParticle.body.collideWorldBounds = true; dustParticle.body.bounce.set(1); } function update() { //set paddle velocity to zero, only moves with player input paddle.body.setZeroVelocity(); //user controls up/down arrow keys and paddle speed if (cursors.up.isDown) { paddle.body.moveUp(400); } else if (cursors.down.isDown) { paddle.body.moveDown(400); } //collision detection for paddle and iWall game.physics.arcade.collide(paddle, dustParticle, dustpaddleCollision, null, this); game.physics.arcade.collide(iWall, dustParticle, dustiWallCollision, null, this); } //collision call with paddle function dustpaddleCollision (obj1, obj2) { //destroy dustParticle instance dustParticle.kill(); //increment score and display new score score += 10; scoreText.text ='Score: ' + score; } //collision call with iWall function dustiWallCollision (obj1, obj2) { //decrease lives, disply new lives, destroy dustParticle instance lives--; livesText.text = 'Lives: ' + lives; dustParticle.kill(); //when lives = 0, gameover otherwise create new instance of dustParticle if (lives === 0) { gameOver(); } else { dustParticle.reset(700, Math.floor(Math.random() * (600))); dustParticle.body.velocity.setTo(Math.floor(Math.random() * (300)+50)*-1,Math.floor(Math.random() * (300)+50)*-1); } } //gameOver call, displays 'Game over' to user function gameOver () { introText.text = 'Game Over!'; introText.visible = true; } </script> </body> </html>