Jump to content

I just make a Pong game and need some comments...


AVAVT
 Share

Recommended Posts

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 :D

 

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

1.) Draw

var 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 text

var 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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.) Draw

var 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

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;}
Link to comment
Share on other sites

 

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

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

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...