flan

Members
  • Content Count

    3
  • Joined

  • Last visited

About flan

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hello all! I have hit a roadblock and I need help :/ All I want out of this is one thing: I press a cursor key, and an animation plays. Three of my animations work perfectly, and two only play the first frame of the animation when the keys are pressed (down && left) || (down && right). Any insight to what I hope is just a simple typo? Thanks for your time! EDIT: The frames that are not working are not the same size as the frames that do work, they are about twice the width, could that have something to do with it? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){ //loading the background game.load.image('background', 'background.png'); //loading three ball images game.load.image('redBall', 'redBall.png'); game.load.image('blueBall', 'blueBall.png'); game.load.image('greenBall', 'greenBall.png'); //loading the atlas game.load.atlas('player', 'henAnimation/henAnimation.png', 'henAnimation/henAnimation.json'); } var cursors; var player; function create(){ //adding the background game.add.sprite(0, 0, 'background'); //adding player player = game.add.sprite(200, 200, 'player'); //cursor animations-stop, right, and left work perfectly player.animations.add('stop', Phaser.Animation.generateFrameNames('', 1, 3, '.png', 4), 10, true); player.animations.add('right', Phaser.Animation.generateFrameNames('', 4, 5, '.png', 4), 10, true); player.animations.add('left', Phaser.Animation.generateFrameNames('', 6, 7, '.png', 4), 10, true); //only load the first frame of the animation player.animations.add('rightlick', Phaser.Animation.generateFrameNames('', 8, 10, '.png', 4), 10, true); player.animations.add('leftlick', Phaser.Animation.generateFrameNames('', 11, 13, '.png', 4), 10, true); cursors = game.input.keyboard.createCursorKeys(); } function update(){ if (cursors.left.isDown) { player.animations.play('left'); } else if ((cursors.left.isDown) && (cursors.down.isDown)) { player.animations.play('leftlick'); } else if (cursors.right.isDown) { player.animations.play('right'); if ((cursors.right.isDown) && (cursors.down.isDown)) { player.animations.play('rightlick'); } } else { player.animations.play('stop'); } }
  2. "There is no technical advantage of using a sprite sheet at all. They tend to use more space both in memory and bandwidth because they don’t pack frame data as efficiently as a texture atlas does. However, there are lots of legacy graphics out there in that format, and its still quite popular today. So we support them. But you should try and pack graphics into atlases where possible to save on ram." After reading this quote by Richard Davey, I thought I'd try it out, and can't seem to make it work..."Uncaught TypeError: Cannot read property 'x' of undefined" at line 224? I've labeled 224 below and left both the spritesheet and texture atlas code intact side by side with the SS commented out...can anyone offer any suggestions? Thanks in advance! -flan <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>boysaver. just...for...love.</title> <script src="phaser.js"></script> <style type="text/css"> html{ background-color: black; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(840, 420, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var player; var cursors; var map; var layer; var water; var hitler; var jaws; var music; var count = 0; var gameOverText; function preload () { game.load.audio('music', ['boysavermusic.mp3', 'boysavermusic.m4a']); game.load.tilemap('level', 'map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('water', 'water.png'); game.load.image('tiles', 'real_tileset.png'); game.load.image('jaws', 'jaws.png'); game.load.image('hitlerCounter', 'hitlerCounter.png'); //SPRITESHEET //game.load.spritesheet('scottRunning', 'playerSpritesheet.png', 70, 70); //game.load.spritesheet('hitlerRolling', 'hitlerSpritesheet.png', 70, 70); //ATLAS game.load.atlas('atlas', 'spritesheet.png', 'atlas.json', Phaser.Loader.TEXTURE_ATLAS_JSON_HASH); } function create() { game.stage.backgroundColor = "#66EEFF"; music = game.sound.play('music'); text = game.add.text(680, 25, "" + count + "", { font: "40px Tahoma" }); gameOverText = game.add.text(game.world.centerX, game.world.centerY, "", { font: "100px Tahoma" }); gameOverText.anchor.setTo(0.5, 0.5); gameOverText.fixedToCamera = true; text.anchor.setTo(0.5, 0.5); text.fixedToCamera = true; map = game.add.tilemap('level'); map.addTilesetImage('real_tileset', 'tiles'); map.setCollision([0, 1, 3, 4, 6, 7, 8, 10, 11, 12, 23], true, 'layer_2'); layer2 = map.createLayer('layer_2'); waterlayer = map.createLayer('waterlayer'); game.physics.startSystem(Phaser.Physics.ARCADE); //origin point and dimensions of the background game.world.setBounds(0, 0, 3500, 420); //ATLAS player = game.add.sprite(92, game.world.centerY, 'atlas'); //SPRITESHEET //player = game.add.sprite(92, game.world.centerY, 'scottRunning'); game.physics.enable(player); game.camera.follow(player); player.anchor.setTo(0.5, 0.5); player.scale.x = 1.45; player.scale.y = 1.45; player.body.bounce.y = 0.2; player.body.collideWorldBounds = true; //SPRITESHEET //player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8], 12, true); //player.animations.add('right', [9, 10, 11, 12, 13, 14, 15, 16, 17], 12, true); //player.animations.add('up', [18], 8, true); jaws = game.add.sprite(2735, game.world.centerY + 100, 'jaws'); game.physics.enable(jaws); jaws.body.collideWorldBounds = true; water = game.add.sprite(2660, 350, 'water'); game.physics.enable(water); water.body.collideWorldBounds = true; water2 = game.add.sprite(2800, 350, 'water'); game.physics.enable(water2); water2.body.collideWorldBounds = true; water3 = game.add.sprite(2520, 350, 'water'); game.physics.enable(water3); water3.body.collideWorldBounds = true; water4 = game.add.sprite(2450, 350, 'water'); game.physics.enable(water4); water4.body.collideWorldBounds = true; water5 = game.add.sprite(2940, 350, 'water'); game.physics.enable(water5); water5.body.collideWorldBounds = true; water6 = game.add.sprite(3010, 350, 'water'); game.physics.enable(water6); water6.body.collideWorldBounds = true; //SPRITESHEET //hitler = game.add.sprite(200, game.world.centerY, 'hitlerRolling'); //ATLAS hitler = game.add.sprite(200, game.world.centerY, 'atlas'); hitler.animations.add('rollleft', Phaser.Animation.generateFrameNames('rollleft', 1, 12), 12, true); hitler.animations.add('rollright', Phaser.Animation.generateFrameNames('rollright', 1, 12), 12, true); game.physics.enable(hitler); hitler.body.bounce.setTo(.5, .5); hitler.scale.x = .5; hitler.scale.y = .5; hitler.body.velocity.x = 250; hitler.body.collideWorldBounds = true; //SPRITESHEET //hitler.animations.add('rollleft', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 8, true); //hitler.animations.add('rollright', [11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 8, true); hitlerCounter = game.add.sprite(650, 0, 'hitlerCounter'); hitlerCounter.scale.x = .50; hitlerCounter.scale.y = .50; hitlerCounter.fixedToCamera = true; //ATLAS player.animations.add('dead', Phaser.Animation.generateFrameNames('dead', 1, 9), 12, true); player.animations.add('left', Phaser.Animation.generateFrameNames('left', 1, 9), 12, true); player.animations.add('right', Phaser.Animation.generateFrameNames('right', 1, 9), 12, true); player.animations.add('up', Phaser.Animation.generateFrameNames('up', 1, 1), 12, true); player.animations.add('still', Phaser.Animation.generateFrameNames('still', 1, 1), 12, true); game.physics.arcade.gravity.y = 300; cursors = game.input.keyboard.createCursorKeys(); } function update () { player.body.velocity.x = 0; game.physics.arcade.collide(hitler, layer2); game.physics.arcade.collide(player, layer2); game.physics.arcade.overlap(player, hitler, destroyHitler); game.physics.arcade.overlap(jaws, player, destroyPlayer); game.physics.arcade.overlap(water, player, drownPlayer); game.physics.arcade.overlap(water2, player, drown2Player); game.physics.arcade.overlap(water3, player, drown3Player); game.physics.arcade.overlap(water4, player, drown4Player); game.physics.arcade.overlap(water5, player, drown5Player); game.physics.arcade.overlap(water6, player, drown6Player); game.physics.arcade.overlap(water, player, gameOver, null, this); game.physics.arcade.overlap(water2, player, gameOver, null, this); game.physics.arcade.overlap(water3, player, gameOver, null, this); game.physics.arcade.overlap(water4, player, gameOver, null, this); game.physics.arcade.overlap(water5, player, gameOver, null, this); game.physics.arcade.overlap(water6, player, gameOver, null, this); game.physics.arcade.overlap(hitler, player, updateText, null, this); function gameOver(){ gameOverText.setText("GAME OVER"); } function updateText(){ count++; text.setText("" + count + ""); } if (cursors.up.isDown) { player.frame = 18; if (player.body.onFloor()) { player.body.velocity.y = -300; } } if (cursors.left.isDown) { player.body.velocity.x = -300; player.animations.play('left'); } else if (cursors.right.isDown) { player.body.velocity.x = 300; player.animations.play('right'); } else { player.animations.stop(); player.frame = 19; } if (hitler.body.velocity.x >= 1) { 224--> hitler.animations.play('rollright'); } else if (hitler.body.velocity.x <=0) { hitler.animations.play('rollleft'); } //game.reset(); } function reset() { game.gameStarted = false; game.gameOver = false; } function destroyPlayer (player, jaws){ player.animations.play('dead'); gameOverText.setText("Game Over"); jaws.kill(); } function destroyHitler (hitler, player){ //means the player kills the hitler count+=1; text.setText("" + count + ""); player.kill(); } function drownPlayer (player, water){ player.animations.play('dead'); gameOverText.setText("Game Over"); water.kill(); } function drown2Player (player, water2){ player.animations.play('dead'); gameOverText.setText("Game Over"); water2.kill(); } function drown3Player (player, water3){ player.animations.play('dead'); gameOverText.setText("Game Over"); water3.kill(); } function drown4Player (player, water4){ player.animations.play('dead'); gameOverText.setText("Game Over"); water4.kill(); } function drown5Player (player, water5){ player.animations.play('dead'); gameOverText.setText("Game Over"); water5.kill(); } function drown6Player (player, water6){ player.animations.play('dead'); gameOverText.setText("Game Over"); water6.kill(); } //FOR EXAMPLE OF GAME OVER http://phaser.io/examples/v2/p2-physics/state-reset function render () { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); debugger; } </script> </body> </html>
  3. Greetings, I'm new to this "asking for help" thing, so this is my first post because I just can't do this alone anymore. I'm working on a sidescroller with a simple background image, a player using player.animations for cursor movement, and physics.ARCADE. I'm hopelessly stuck with a lot of code and a white page on the other end. I'm using Brackets live preview via chrome but can anyone look at my code and possibly point me in the right direction? I'm not sure how most people go about debugging, but JSLint hasn't helped. Let me know if I'm abusing any sort of etiquette, code or otherwise, and thanks in advance. <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>hello phaser!</title> <script src="phaser.min.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(3500, 420, Phaser.AUTO, '', { preload: preload, create: create }); function preload () { game.load.sprite('background', 'background.png'); game.load.spritesheet('scottRunning', 'playerSpritesheet.png', 70, 70); } var player; var cursors; function create () { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.image(0, 0, 'background'); //origin point and dimensions of the background game.world.setBounds(0, 0, 3500, 420); player = game.add.sprite(92, game.world.centerY, 'scottRunning'); game.physics.arcade.enable(player); player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8], 8, true); player.animations.add('right', [9, 10, 11, 12, 13, 14, 15, 16, 17], 8, true); player.animations.add('up', [18], 8, true); game.camera.follow(player); } function update () { // V collision parameters V //game.physics.arcade.collide(player, whatever); //game.physics.arcade.overlap(player, stars, collectStar, null, this); cursors = game.input.keyboard.createCursorKeys(); player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { player.body.velocity.x = 150; player.animations.play('right'); } else if (cursors.down.isDown) { player.body.velocity.x = 0; player.animations.play('up'); } else { player.animations.stop(); player.frame = 18; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function render () { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); } </script> </body> </html>