DbD

Members
  • Content Count

    23
  • Joined

  • Last visited

About DbD

  • Rank
    Member

Contact Methods

  • Twitter
    Doodayer
  1. Hi all, I'm currently editing an example i found on infinite jumpers, and I was wondering about an infinite scrolling background. The thing with the example I'm using is that it's constantly creating, and destroying the top and bottom parts of the map to keep it within a 300x500 size, and too keep it from lagging once the game gets too big. The issue I'm having is with the background. I would like it to constantly update with the to part of the map,and to give it a "infinite scrolling background" feel. However, when the game updates the top portion of the map, it cuts off the top of the background image, and no matter what I do, I cant seem to figure out how to recreate the background on the new portions of the map. Here's the game in it's current state: http://dbdeveloped.com/games/commando-escape/ and here'​s the current code: ​ var Jumper = function() {};Jumper.Play = function() {}; Jumper.Play.prototype = { preload: function() { this.load.image( 'hero', 'assets/player.png' ); this.load.image( 'pixel', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/pixel_1.png' ); this.load.image("background", "assets/background.png"); }, create: function() { // background color //this.stage.backgroundColor = '#6bf'; this.bg= this.game.add.tileSprite(0, 0, game.stage.bounds.width, game.cache.getImage('background').height, 'background'); // scaling this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.maxWidth = this.game.width; this.scale.maxHeight = this.game.height; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize( true ); // physics this.physics.startSystem( Phaser.Physics.ARCADE ); // camera and platform tracking vars this.cameraYMin = 99999; this.platformYMin = 99999; // create platforms this.platformsCreate(); // create hero this.heroCreate(); // cursor controls this.cursor = this.input.keyboard.createCursorKeys(); }, update: function() { // this is where the main magic happens // the y offset and the height of the world are adjusted // to match the highest point the hero has reached this.world.setBounds( 0, -this.hero.yChange, this.world.width, this.game.height + this.hero.yChange ); // the built in camera follow methods won't work for our needs // this is a custom follow style that will not ever move down, it only moves up this.cameraYMin = Math.min( this.cameraYMin, this.hero.y - this.game.height + 130 ); this.camera.y = this.cameraYMin; // hero collisions and movement this.physics.arcade.collide( this.hero, this.platforms ); this.heroMove(); // for each plat form, find out which is the highest // if one goes below the camera view, then create a new one at a distance from the highest one // these are pooled so they are very performant this.platforms.forEachAlive( function( elem ) { this.platformYMin = Math.min( this.platformYMin, elem.y ); if( elem.y > this.camera.y + this.game.height ) { elem.kill(); this.platformsCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.platformYMin - 100, 50 ); } }, this ); if( game.input.keyboard.isDown(Phaser.Keyboard.W)) { this.bg.tilePosition.y += 1; } }, shutdown: function() { // reset everything, or the world will be messed up this.world.setBounds( 0, 0, this.game.width, this.game.height ); this.cursor = null; this.hero.destroy(); this.hero = null; this.platforms.destroy(); this.platforms = null; }, platformsCreate: function() { // platform basic setup this.platforms = this.add.group(); this.platforms.enableBody = true; this.platforms.createMultiple( 10, 'pixel' ); // create the base platform, with buffer on either side so that the hero doesn't fall through this.platformsCreateOne( -16, this.world.height - 16, this.world.width + 16 ); // create a batch of platforms that start to move up the level for( var i = 0; i < 9; i++ ) { this.platformsCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.world.height - 100 - 100 * i, 50 ); } }, platformsCreateOne: function( x, y, width ) { // this is a helper function since writing all of this out can get verbose elsewhere var platform = this.platforms.getFirstDead(); platform.reset( x, y ); platform.scale.x = width; platform.scale.y = 16; platform.body.immovable = true; return platform; }, heroCreate: function() { // basic hero setup this.hero = game.add.sprite( this.world.centerX, this.world.height - 48, 'hero' ); this.hero.anchor.set( 0.5 ); // track where the hero started and how much the distance has changed from that point this.hero.yOrig = this.hero.y; this.hero.yChange = 0; // hero collision setup // disable all collisions except for down this.physics.arcade.enable( this.hero ); this.hero.body.gravity.y = 500; this.hero.body.checkCollision.up = false; this.hero.body.checkCollision.left = false; this.hero.body.checkCollision.right = false; }, heroMove: function() { // handle the left and right movement of the hero if (game.input.keyboard.isDown(Phaser.Keyboard.A)) { this.hero.body.velocity.x = -200; } else if (game.input.keyboard.isDown(Phaser.Keyboard.D)) { this.hero.body.velocity.x = 200; } else { this.hero.body.velocity.x = 0; } // handle hero jumping if( game.input.keyboard.isDown(Phaser.Keyboard.W) && this.hero.body.touching.down ) { this.hero.body.velocity.y = -350; } // wrap world coordinated so that you can warp from left to right and right to left this.world.wrap( this.hero, this.hero.width / 2, false ); // track the maximum amount that the hero has travelled this.hero.yChange = Math.max( this.hero.yChange, Math.abs( this.hero.y - this.hero.yOrig ) ); // if the hero falls below the camera view, gameover if( this.hero.y > this.cameraYMin + this.game.height && this.hero.alive ) { this.state.start( 'Play' ); } }} var game = new Phaser.Game( 300, 500, Phaser.CANVAS, '' );game.state.add( 'Play', Jumper.Play );game.state.start( 'Play' );​ Thanks for all the help, and sorry for the large code paste. Pretty much everything that i'm working on for the background happens in the create and update functions.
  2. Hi I'm currently trying to edit and modify a codepen example found here: http://codepen.io/jackrugile/pen/fqHtn/ from a thread found here: http://www.html5gamedevs.com/topic/7369-infinite-world/ what I'm trying to do is get it into an html document, but for some reason when I use it "as-is" it just shows a black screen. How can I implement this example into a running version for an html file, and use it on my own server. (and yes I know how to implement a .js file into .html, this one's just not working) ​ thanks for the help!​
  3. Hi my name is Derrek and I'm a web developer/designer. I've always had a passion for creating games, I've just never been a decent artist myself. I would love to bring an artist into my world of developing games! I'm really looking for someone who's good at 2d pixel-styled graphics. That art style has always facinated me, and I'm sure with the right artist we could create something amazing. I technically have my own start up company (being a web developer and all) and any games that I create will be hosted there amongst several other websites like GameJolt, and others depending on liscensing (such as miniclip,newgrounds,addicting games,etc.) If you're interested in joining my team, I would love to see some art you've previously done just as a reference to your experience and the quality that I can expect! I'm only looking for one artist however, so if you're interested please feel free to message me, or email me at doodayer@gmail.com My website is http://www.dbdeveloped.com/ you can check it out if you'd like, just be warned that it's not yet finished. It functions very smoothly and operates properly on all Microsoft based browsers (i.e. chrome, edge, firefox) however the css is not yet completed for mac browsers (sorry mac users!) also, i'll just mention now that any money made through ad revenue on the page I host it on, and other websites will be split evenly between the artist and myself (upon completion of the game I will have a contract for both of to sign stating this). This doesn't mean that there is a guarantee of making money, only a possibility and a promise that if money is made, it will be an even split. thank you all for looking!
  4. DbD

    Physics to Graphics

    For anyone who is interested in the proper way of doing this, i've figured it out. I'm sure there are simpler ways of going about it (there always is in programming) but here's what i've ended with: http://codepen.io/Doodayer/pen/NqppWd Now, the collision between enemy and player still doesn't properly work (not sure why) but you can see that the physics are properly working because by adding playerSprite.body.collideWorldBounds = true;, you are giving the playerSprite collision physics and it works. Thanks for helping me and pointing me in the right direction with this one!
  5. DbD

    Physics to Graphics

    I figured out why the movement isn't working, just not sure how to go about fixing it. When I enable the physics with game.physics.enable(playerSprite, Phaser.Physics.ARCADE);, it disables the code that i have for movement. Probably going to have to figure out a better way of going about it. Any suggestions? edit: note, i still can't get my own image to actually work instead of the one you have linked in. EDIT EDIT: Okay, i got the image to work, but i still have the issue of game.physics.enable(playerSprite, Phaser.Physics.ARCADE); crashing the game. it just makes it go black screen.
  6. DbD

    Physics to Graphics

    it is in the proper directory. I'm using Brackets, and it shows the image when you hover, which tells me i didn't improperly type my url. Still no clue why it won't load..
  7. DbD

    Physics to Graphics

    Tried that, didn't help. And yeah that was the code i took from the codepen in your second post. For some reason still no player movement. EDIT: update, i replaced the 'fake' image with a 1x1 transparent png and that crashed the whole game...
  8. DbD

    Physics to Graphics

    everything works great in the codepen, but when i copy that over into my .js file, i can't move the player. Suggestions?
  9. DbD

    Physics to Graphics

    Here's a codepen: http://codepen.io/Doodayer/pen/qdRGba not sure why it won't create the second circle (aka enemy) but as far as i can tell, it should be. EDIT: also like i said before, i'm not sure if it's actually even adding the circle to a sprite. as far as i can tell, it seems to be working, but i haven't tested any physics on it yet.
  10. DbD

    Physics to Graphics

    i already have added them to a sprite: //enemy graphics enemy = game.add.graphics(0, 0); //graphics.lineStyle(2, 0xffd900, 1); enemy.beginFill(0xFF0000, 1); enemy.drawCircle(125, 125, 50); enemy.endFill(); // Create an empty sprite as a container enemySprite = game.add.sprite(0, 0, enemy); // Add the graphics to the sprite as a child enemySprite.addChild(enemy); // Enable physics on the sprite (as graphics objects cannot have bodies applied) game.physics.enable(enemySprite, Phaser.Physics.ARCADE);but for some reason it won't create the enemy, only the player
  11. DbD

    Physics to Graphics

    I've been trying to add physics to graphics and i have it working for a single player graphic: var cirSize = 50; var cirX = game.world.width/2; var cirY = game.world.height/2; //player graphics player = game.add.graphics(0, 0); //graphics.lineStyle(2, 0xffd900, 1); player.beginFill(0xFF0000, 1); player.drawCircle(cirX, cirY, cirSize); player.endFill(); // Create an empty sprite as a container playerSprite = game.add.sprite(0, 0, player); // Add the graphics to the sprite as a child playerSprite.addChild(player); // Enable physics on the sprite (as graphics objects cannot have bodies applied) game.physics.enable(playerSprite, Phaser.Physics.ARCADE);but when i duplicate it and try to add an enemy with the same code, it doesn't create the enemy: var cirSize = 50; var cirX = game.world.width/2; var cirY = game.world.height/2; //player graphics player = game.add.graphics(0, 0); //graphics.lineStyle(2, 0xffd900, 1); player.beginFill(0xFF0000, 1); player.drawCircle(cirX, cirY, cirSize); player.endFill(); // Create an empty sprite as a container playerSprite = game.add.sprite(0, 0, player); // Add the graphics to the sprite as a child playerSprite.addChild(player); // Enable physics on the sprite (as graphics objects cannot have bodies applied) game.physics.enable(playerSprite, Phaser.Physics.ARCADE); //enemy graphics enemy = game.add.graphics(0, 0); //graphics.lineStyle(2, 0xffd900, 1); enemy.beginFill(0xFF0000, 1); enemy.drawCircle(125, 125, 50); enemy.endFill(); // Create an empty sprite as a container enemySprite = game.add.sprite(0, 0, enemy); // Add the graphics to the sprite as a child enemySprite.addChild(enemy); // Enable physics on the sprite (as graphics objects cannot have bodies applied) game.physics.enable(enemySprite, Phaser.Physics.ARCADE);any ideas why? EDIT: I'm pretty sure that the first bit of code works, but frankly i'm not sure if it's actually allowing me to add physics to the player. If it doesn't seem right, feel free to let me know.
  12. i figured it out. for anyone who's curious, here's what i ended with: var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game test', { preload: preload, create: create, update: update });function preload() { game.load.image('background', 'assets/defaultBckgrnd.png'); game.input.maxPointers = 1; }function create() { game.add.sprite(0, 0, 'background'); var cirSize = 100; var cirX = 100; var cirY = 100; var graphics = game.add.graphics(0, 0); //graphics.lineStyle(2, 0xffd900, 1); graphics.beginFill(0xFF0000, 1); player = graphics.drawCircle(cirX, cirY, cirSize); graphics.endFill(); player.anchor.setTo(0.5, 0.5); player.body.collideWorldBounds = true; player.x = cirX; player.y = cirY; }function update() { upW = game.input.keyboard.addKey(Phaser.Keyboard.W); downS = game.input.keyboard.addKey(Phaser.Keyboard.S); leftA = game.input.keyboard.addKey(Phaser.Keyboard.A); rightD = game.input.keyboard.addKey(Phaser.Keyboard.D); // normal directional movement if (leftA.isDown) { // Move to the left player.x -= 5; } else if (rightD.isDown) { // Move to the right player.x += 5; } else if (upW.isDown) { // Move to the up player.y -= 5; } else if (downS.isDown) { // Move to the down player.y += 5; } // diagonal movement if (leftA.isDown && upW.isDown) { // Move to the left and up player.x -= 5; player.y -= 5; } if (leftA.isDown && downS.isDown) { // Move to the left and down player.x -= 5; player.y += 5; } if (rightD.isDown && upW.isDown) { // Move to the right and up player.x += 5; player.y -= 5; } if (rightD.isDown && downS.isDown) { // Move to the right and down player.x += 5; player.y += 5; } }EDIT: something else i just figured out is that in the create function, player.x = cirX; player.y = cirY; is unnecessary.
  13. Hi i'm trying to make a circle that is then used as the player, but for some reason i'm having an issue with the movement code. NOTE: I've used this code on regular sprites and it works fine, just won't work for the circle for some reason var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game test', { preload: preload, create: create, update: update });function preload() { game.load.image('background', 'assets/defaultBckgrnd.png'); game.input.maxPointers = 1; }function create() { game.add.sprite(0, 0, 'background'); var graphics = game.add.graphics(0, 0); // graphics.lineStyle(2, 0xffd900, 1); graphics.beginFill(0xFF0000, 1); player = graphics.drawCircle(300, 300, 100); player.anchor.setTo(0.5, 0.5); game.physics.arcade.enable(player); player.body.collideWorldBounds = true; }function update() { upW = game.input.keyboard.addKey(Phaser.Keyboard.W); downS = game.input.keyboard.addKey(Phaser.Keyboard.S); leftA = game.input.keyboard.addKey(Phaser.Keyboard.A); rightD = game.input.keyboard.addKey(Phaser.Keyboard.D); // Reset the players velocity (movement) player.velocity.x = 0; player.velocity.y = 0; // normal directional movement if (leftA.isDown) { // Move to the left player.body.velocity.x = -150; } else if (rightD.isDown) { // Move to the right player.body.velocity.x = 150; } else if (upW.isDown) { // Move to the up player.body.velocity.y = -150; } else if (downS.isDown) { // Move to the down player.body.velocity.y = 150; } // diagonal movement if (leftA.isDown && upW.isDown) { // Move to the left and up player.body.velocity.x = -150; player.body.velocity.y = -150; } if (leftA.isDown && downS.isDown) { // Move to the left and down player.body.velocity.x = -150; player.body.velocity.y = 150; } if (rightD.isDown && upW.isDown) { // Move to the right and up player.body.velocity.x = +150; player.body.velocity.y = -150; } if (rightD.isDown && downS.isDown) { // Move to the right and down player.body.velocity.x = 150; player.body.velocity.y = 150; } }Everything works fine when i don't have the movement code in the function update(), but as soon as I add it, phaser does it's little black screen showing you that it's not working. Please help!