AVAVT Posted July 1, 2014 Share Posted July 1, 2014 Hi I'm learning how to make a game and don't really have any 'awesome' game in mind, so I decided to make Pong instead. I would really appreciate it if someone could give me some pointers here and there about my work, I feel very lost even when making this simple game. Some problems I found while making it are: 1. I don't know how to create a new Sprite without using a bitmap image. The ball and the player are just simple white block, but I still had to create 2 png files to load into the game. Is there anyway to draw simple rectangle/ovals to use instead of premade images?function preload() { game.load.image('bar','img/player.png'); // a white bar game.load.image('ball','img/ball.png'); // a white ball}2. I don't know how to properly center align sprites/text. The sprites are ok since I know their size, but texts have dynamic length. How can I center align the text - at the center of the screen for example?game.add.text(game.world.width/4 - 85, game.world.height - 40, 'Controls: W/S', { font: 24+'px Courier', fill: '#fff' });game.add.text(game.world.width*3/4 - 105, game.world.height - 40, 'Controls: Up/Down', { font: 24+'px Courier', fill: '#fff' });3. Right now my ball just start off running to the right using body.velocity.x = 500. Is there any simple way I can give it a speed + direction instead? (like velocity 500, direction 30 deg).ball.body.velocity.x = 500;4. I can check collision between 2 sprites, but I can't find a way to check collision between the ball and the world bounds, so I have to check ball x versus world bounds width instead. But it doesn't really feel right for me. Would this piece of code suffices or is there anyway I can improve it?if ((ball.body.x + ball.body.width) >= game.world.width){ player1Score++; scoreText1.text = 'Player 1: ' + player1Score; resetPosition();}else if (ball.body.x <= 0){ player2Score++; scoreText2.text = 'Player 2: ' + player2Score; resetPosition();}Also if anyone have free time to look at my code and give other advices (the right way to do this/that) I would really appreciate it too I uploaded my game to google drive since I can't upload the file into this post: https://drive.google.com/file/d/0ByFy6Fb6p0hAOWNyajNtZkotY2s/edit?usp=sharing Link to comment Share on other sites More sharing options...
Kobaltic Posted July 1, 2014 Share Posted July 1, 2014 I believe all your questions are answered here:http://examples.phaser.io/ 1. check geometry and you have to render it2. I think you can use an anchor but not 100% sure3. You can use .x = .x + speed; (also .y same way)4. create 4 boxes at the edges and check collision against them. AVAVT 1 Link to comment Share on other sites More sharing options...
lukaMis Posted July 2, 2014 Share Posted July 2, 2014 1.) Drawvar drawnObject;var width = 100 // example;var height = 100 // example;var bmd = game.add.bitmapData(width, height); bmd.ctx.beginPath();bmd.ctx.rect(0, 0, width, height);bmd.ctx.fillStyle = '#ffffff';bmd.ctx.fill();drawnObject = game.add.sprite(game.world.centerX, game.world.centerY, bmd);drawnObject.anchor.setTo(0.5, 0.5); 2.) Center textvar yourTextVar;yourTextVar = game.add.text(game.world.centerX , game.world.centerY, 'Controls: W/S', {font:'24px Courier', fill: '#ffffff', align: 'center' });yourTextVar.anchor.setTo(0.5, 0.5); 4.) To set collision with world bounds:game.physics.enable(ball, Phaser.Physics.ARCADE);ball.body.collideWorldBounds = true; Than you can specify which collision is on like this:ball.body.checkCollision.up = false;ball.body.checkCollision.down = true;.. Or you can check if ball is out of world. (but disable collideWorldBounds)ball.events.onOutOfBounds.add(yourFunctionName);function yourFunctionName() { console.log('ball out of world'); // do awesome stuff here...} Hope that helps.Luka AVAVT 1 Link to comment Share on other sites More sharing options...
lewster32 Posted July 2, 2014 Share Posted July 2, 2014 For question 1, you can also use the Graphics object:// create an empty spritevar paddle = game.add.sprite();// create a graphics object to draw our paddle withvar paddleGraphic = game.add.graphics();// set the colour to whitepaddleGraphic.beginFill(0xffffff);// draw a rectangle with a width of 100 and a height of 20paddleGraphic.drawRect(0, 0, 100, 20);// set the x and y to half the width and height to center the graphic, as graphics// do not have an anchor propertypaddleGraphic.x = paddleGraphic.width * 0.5;paddleGraphic.y = paddleGraphic.height * 0.5;// add the graphic to the spritepaddle.addChild(paddleGraphic);// enable physicsgame.physics.enable(paddle, Phaser.Physics.ARCADE);// ... repeat for the ball, but instead of using drawRect, do ballGraphic.drawCircle(0, 0, 25) to draw a circle with a radius of 50 AVAVT 1 Link to comment Share on other sites More sharing options...
AVAVT Posted July 2, 2014 Author Share Posted July 2, 2014 Thank you all very much for your replies! 1. I decided to use Luka's instruction to draw my sprites since it requires little code change, and it worked like a charm. I also looked at the geometry examples from Kobaltic's reply. Is there any situation where I should choose geometry instead of canvas draw (and vice versa), or is it just simply a matter of preferences? 1.) Drawvar drawnObject;var width = 100 // example;var height = 100 // example;var bmd = game.add.bitmapData(width, height); 2. The usage of anchor for text alignment was perfect! My texts are so neat now, thank you! <3 3. Only Kobaltic answered this but I don't really understand. Could you explain more? For example if I want to make the ball run at 100pixel/frame toward 30 degree direction, is there any neat way to do this, or do I have to calculate the corresponding x and y velocity and apply them separately? 4. From Luka's reply I thought of disabling world collide check for the left & right side, and made a callback function for when the ball is OOB. Here I found something I don't really understand. This is my code before change (the question I have is in resetPosition() ):function update(){ ... // check ball's position if ((ball.body.x + ball.body.width) >= game.world.width){ player1Score++; scoreText1.text = 'Player 1: ' + player1Score; resetPosition(); } else if (ball.body.x <= 0){ player2Score++; scoreText2.text = 'Player 2: ' + player2Score; resetPosition(); } ...}function resetPosition(){ // sprite.body.x works here player1.body.x = 16; player1.body.y = game.world.height/2 - 75; player2.body.x = game.world.width - 36; player2.body.y = game.world.height/2 - 75; ball.body.x = game.world.width / 2 - 10; ball.body.y = game.world.height/2 - 10; ...}After change:function create(){ ... ball.events.onKilled.add(ballKilled, this); ...}function ballKilled(ball){ ... resetPosition();}function resetPosition(){ // sprite.body.x doesn't work anymore here player1.reset(game.world.width - 26, game.world.centerY, 1); player2.reset(26, game.world.centerY, 1); ball.reset( game.world.centerX, game.world.centerY, 1); ...}After I changed the method of detection from update() to an event listener, I found that sprite.body.x = X; doesn't work anymore, and I have to use sprite.reset(). Could anybody tell me why I can use sprite.body.x = X; inside update() but can't use it elsewhere? I am very sorry if some of my questions are already solved in an example. I did read through several example games mentioned in Kobaltic's reply before coding this game, but I... fell asleep very easily when reading through premade example code. I can only keep my concentration while thinking ("Why bother thinking when the answer is right below?" dilemma). And it's hard to get precise answer from example code, too. For example, I still don't understand why they use game.physics.enable(ball, Phaser.Physics.ARCADE); in the demo code. I thought Phaser.Physics.ARCADE is already used as default? Was it to anticipate change that may occur in later version? It is another part of the reason why I decide to practice instead of keep on reading. Once again very sorry if you think I'm lazy Link to comment Share on other sites More sharing options...
lewster32 Posted July 2, 2014 Share Posted July 2, 2014 Sending an object off in a direction is done with a bit of trigonometry - you can see this example to see how to use the rotation property (which is in radians, not degrees) to set a velocity: http://gamemechanicexplorer.com/#bullets-3 To get radians from degrees you can use Phaser.Math.degToRad like so:function setBallVelocity(degrees, speed) { var angle = Phaser.Math.degToRad(degrees); ball.body.velocity.x = Math.cos(angle) * speed; ball.body.velocity.y = Math.sin(angle) * speed;} AVAVT 1 Link to comment Share on other sites More sharing options...
wayfinder Posted July 2, 2014 Share Posted July 2, 2014 Or you could use moveForward and moveBackward which automatically do that for you based on the current angle. Link to comment Share on other sites More sharing options...
lewster32 Posted July 2, 2014 Share Posted July 2, 2014 Only in P2 Wayfinder Link to comment Share on other sites More sharing options...
wayfinder Posted July 2, 2014 Share Posted July 2, 2014 oooh Link to comment Share on other sites More sharing options...
lukaMis Posted July 3, 2014 Share Posted July 3, 2014 After I changed the method of detection from update() to an event listener, I found that sprite.body.x = X; doesn't work anymore, and I have to use sprite.reset(). Could anybody tell me why I can use sprite.body.x = X; inside update() but can't use it elsewhere? We need to see more code. To understand what is the problem. And it's hard to get precise answer from example code, too. For example, I still don't understand why they use game.physics.enable(ball, Phaser.Physics.ARCADE); in the demo code. I thought Phaser.Physics.ARCADE is already used as default? Arcade engine is on by default (you do not have to start physic system) in contrast to other two that come with phaser but you have to enable it for each sprite and/or group as physics can have big negative impact on performance. Link to comment Share on other sites More sharing options...
Harissa Posted July 9, 2014 Share Posted July 9, 2014 Ok, I've been trying something similar. I first tried using lewster32's technique using Phaser graphics but I couldn't get the physics body to reflect the shape of the graphics. What ever I did the body was always just a 50 pixels square. (I suppose I could have set the body separately using - body.setSize) Then I tried lukaMis's technique and it worked first time, so I'm going with that. I'm guessing that for the graphics Phaser creates a bitmap internally anyway and draws the graphics onto it, so there isn't much if a performance issue between the two methods. Can anyone confirm/deny this? Link to comment Share on other sites More sharing options...
lewster32 Posted July 9, 2014 Share Posted July 9, 2014 It sounds like you were enabling the body before adding the graphics to the sprite, or adding the shapes to the graphics object. But yes, body.setSize is there if all else fails. Graphics are vectors so they scale, rotate and transform without pixellating. The shapes can go anywhere in relation to the graphics object also; there's no limitation on placing them within a defined size, whereas BitmapData is always a canvas the size of the pixels defined in the constructor, and will thus not scale up well. Link to comment Share on other sites More sharing options...
Recommended Posts