Be a Supporter!

AS: make a pong game with physics

  • 16,927 Views
  • 48 Replies
New Topic Respond to this Topic
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
AS: make a pong game with physics Jun. 2nd, 2005 @ 02:26 PM Reply

I will go over basic physics with Actionscript,I am using Flash MX 2004,it might work with Flash MX but probably not with Flash 5.

At the end of this tutorial,you will be able to make a fun pong game using very simple physics.

The first thing to know about physics:
Physics are usally related to speed,velocity,gravity,and wind.When physics is mentioned,there must be a certain movement.

Starting with basic physics
Let's have a quick look at basic physics,open flash,draw a ball or whatever.I won't be explaining everything because I consider you already know a bit actionscript,otherwise you shouldn't be pointed to physics or maths.Let's start by stting varaibles for the speed.
So type the following code in your ball converted to a movie clip:

onClipEvent(load)
{
Gravity = 5;
Velocity = 0;
}

This will tell to the computer that if we use the word "Gravity",it will take that as a 5.Now we are going to use (enterFrame) to begin the action,we will want the ball to fall at the speed of velocity,but velocity is 0.The following code will simply make the ball fall in a rate of 5 pixels every frame,but we don't want that.We want the ball to fall faster every frame,as it is in real gravity in our real world.Take for example,a man standing on a little wall,when the man jumps,he will fall in a little amount of time,while another man in a plane,would start falling slowly from the plane and then as the gravity attracts him,he will fall faster and faster.So we are going to use a code for reallistic gravity
type the following code in your ball

onClipEvent(enterFrame)//checks if something happens/changes
{
this._y+=Velocity;//makes the ball fall at the rate of the velocity(0)
Velocity=Velocity+Gravity//adds the gravity to the velocity every frame
}

Note:When I type
//
do not worry,everything written after it will be ignored,it is just so I can explain the code in the code itself

now check out the movie and you will see the ball falling faster

Making a floor for the ball to bounce on
now you can try to add a floor so the ball can bounce,now THAT would be real physic!Add thise code to the ball:
(the floor will be positionned at 400 _y,therefore your stage siwe should be 550x400)

onClipEvent(enterFrame)
{
if(this._y>=400)
{
Velocity*=.7;//Note:if it doesn't work,try this: Velocity*=-.7;
}
}

Proceeding to the pong game
Now that you know basics physics,we will proceed to more complicated physics used in a pong game.When you get the point of physics,it becomes very easy to make block brekers and pong games.
We will not be using gravity for that,but we will in the third physics tutorial.
Now that we know how to make a ball move,we only need to know how to make it change the direction of the speed.Open a new flash document and draw a ball.Convert the ball to a movie clip and give it an instance name of ball.We will first proceed to the variables.
Type this code in the ball:


onClipEvent(load)
{
Yspeed = 5;//makes the Yspeed 5
Xspeed = 5;//makes the Xspeed 5
}

We have the variables set,we will start the real coding.We are going to use a stage of 550x400 and make imaginary wallssurrounding the stage.We will actually reverse the speed of the ball when it hits the imaginary walls.Type this in the ball's actionscript panel:

onClipEvent(load)
{
Yspeed = 5;//makes the Yspeed 5
Xspeed = 5;//makes the Xspeed 5
}

onClipEvent(enterFrame)//checks if something happens
{
this._y-=Yspeed;//the speed of the ball is equal to Yspeed
this._x-=Xspeed;//the speed of the ball is equal to Xspeed
if(this._x>=550)/*checks if the ball reaches the _x point of 550*/
{
this._x=550;/*doesn't let the ball to go through 550*/Xspeed*=-1;/*reverses the speed of the ball*/}
/*now we are going to make the same thing for the 3 other "imaginary walls"*/
if(this._x<=0){
this._x=0;Xspeed*=-1;}

if(this._y>=400)
{
this._y=400;Yspeed*=-1;}

if(this._y<=0)
{
this._y=0;Yspeed*=-1;}

if(this.hitTest(_root.pad.l))
{
Yspeed*=-1;Xspeed*=-1;}

if(this.hitTest(_root.pad.r))
{
Yspeed*=-1;Xspeed}
}

If you test the game,the ball should travel 'round the screen!
We are going to make a paddle for some more interactivity.So draw a paddle,convert it into a Movie Clip and give it an instance name of paddleWe are going to use variables again.
Type this code into the paddle:

onClipEvent(load)
{
moveleft = 0; //Sets moveleft to 0
moveright = 0; //Sets moveright to 0
}
onClipEvent(enterFrame)
{
this._x-=moveleft;
this._x+=moveright;
if(Key.isDown(Key.LEFT))
{
moveleft = 5;}//Sets moveleft to 5
else
{
movemeft=0;}
if(!Key.isDown(Key.LEFT))
{
moveleft=0;}
if(!Key.isDown(Key.RIGHT))
{
moveright=0;}
if(Key.isDown(Key.RIGHT))
{
moveright = 5;}
else
{moveright=0;}

if(this._x>=550){moveright=0;} /*If the paddle's _x position is bigger than 550,it cant move right*/
if(this._x<=0){moveleft=0;}/*If the paddle's _x position is smaller than 0,it cant move left.*/
}

Now we are going to make our game more fun,although it is a bit off topic because the topic is about physics,not games.Anyway,we will start by making a dynamic text box;give it a var of score.
click the first and only frame you have got in the timeline and type this in the Actionscript panel:
score = 0;
that will set our text box to 0.Now draw a little funny thing which the player will have to hit in order to get a beetter score.convert it into a movie clip and give it an instance name of
circle(Note:it doesn't have to be a circle though).We are going to make that every time that the ball hits it,it gives you one point(score)and then it goes to another place.Type this code in the 'circle's' Actionscript panel.

onClipEvent(enterFrame)
{
if(this.hitTest(_root.ball))
{
this._x=random(430);
this._y=random(380);
Yspeed*=-1;
Xspeed*=-1;
score+=1;
}
}

That will make that every time that the ball hits it,the ball changes its direction,the score is added by 1,and tthe object is positionned someewhere else.
Have fun!

Phew!That was my longest post ever!(lol,only 50 characters left!)
I will make the third physic tutorial(block breaker with gravity)later because I havn't got any characters left!(9!)


BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 2nd, 2005 @ 02:42 PM Reply

Pong game with gravity!
I won't be explaining everything here beacause this is not for beginners and I am lazy!
Ok then,the code for the ball.It will be very similiar to the first code,the ball will boince on the platform.It is actually the first code of this thread and the second one combined.\
Let's start coding the ball,I will give you the code with explanations.
1)Create a paddle and divide it into two movie clips INSIDE it named "l"(left part)and "r"(right part)
2)The stage MUST be 400x240
3)the paddle's instance name should be "pad"
4)The ball's instance name should be "ball"
5)Da code!

for the ball:


onClipEvent (load) {
velocity = 0;/*there is no velocity,the gravity counts*/
gravity = .3;/*the gravity will be added to the velocity for a rallsitic gravity effect*/
}
onClipEvent (enterFrame) {
this._y += velocity;
velocity = velocity+gravity;
this._x+=speed;

if(this._y>230){this._y=230;velocity*=-1;}/*if the ball's _y position is bigger than 230,it swaps/reverts the the vlocity of the ball*/
if(velocity>10){velocity=10;}//The velocity cant be more than 10
if(this._y<0){this._y=0;}//doesn't let it exit the stage

if(this.hitTest(_root.pad.l)){velocity*=-1;speed=5;speed*=-1;}/*if it hits the left part of the paddle,the velocity is reversed as well as the speed*/
if(this.hitTest(_root.pad.r)){velocity*=-1;speed=5;}/*Same thing with the right part*/
if (this._x<0) {
this._x= 0;speed*=-1;//reverses the speed of the ball
}
if (this._x>400) {
this._x= 400;speed*=-1;//reverses the speed of the ball
}
}

For the paddle:

onClipEvent (load) {
pr = 1;//sets the right speed to 1
pl = 1;//sets the left speed to 1
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
this._x -= pl;
}
if (Key.isDown(Key.RIGHT)) {
this._x += pr;
}
if (this._x<37) {
pl = 0;
} else {
pl = 5;
}
if (this._x>360) {
pr = 0;
} else {
pr = 5;
}
}

Sorry,I was too lazy to explain this code,have fun!


BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 2nd, 2005 @ 03:51 PM Reply

Here is a crappy version of the final product,the stage width and height are wrong thanks to imageshack XD


BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 04:19 AM Reply

Come on...The thread is dying...It will be a shame if it dies...Please,post,host your pong game and post them!


BBS Signature
Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 08:11 AM Reply

Did you actually make this code?


- Matt, Rustyarcade.com

MilkshakeClock
MilkshakeClock
  • Member since: Jan. 21, 2004
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 08:29 AM Reply

I like it. I'll try it out later ;)

jamboreen
jamboreen
  • Member since: Jul. 13, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 08:48 AM Reply

Argh it all goes wrong at the Dynamic text box part for me...how do i give it a variable of Score?

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 11:11 AM Reply

Yes,I have fuly invented the code,I havn't stealen anything!

At 6/3/05 08:48 AM, jamboreen wrote: Argh it all goes wrong at the Dynamic text box part for me...how do i give it a variable of Score?

Choose the text box,make it a dynamic text box(change it from static) and then type score in the Var box.

AS: make a pong game with physics


BBS Signature
jamboreen
jamboreen
  • Member since: Jul. 13, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 11:17 AM Reply

Yeah i couldn't find the var box lol........

<--------Nubi

jamboreen
jamboreen
  • Member since: Jul. 13, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 11:32 AM Reply

hey why not make this into to an actual flash tut?

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 11:37 AM Reply

At 6/3/05 11:32 AM, jamboreen wrote: hey why not make this into to an actual flash tut?

Dark_Toaster, read my topic!


Sup, bitches :)

BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 3rd, 2005 @ 12:02 PM Reply

At 6/3/05 11:32 AM, jamboreen wrote: hey why not make this into to an actual flash tut?

hmm...Isn't this thread a tutorial?XD
Ok,I will maybe turn this into a tutorial which I am going to submit to Newgrounds.


BBS Signature
zer0-degreeez
zer0-degreeez
  • Member since: Aug. 20, 2004
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to AS: make a pong game with physics Jun. 4th, 2005 @ 02:44 AM Reply

BUG FOUND

there's some sort of magnetic field in the side of the paddle....everytime i hit the ball from the edge of the paddle...the ball flys like crazy!!!! lol

Its just like u prove physics wrong! that's awesome

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 4th, 2005 @ 02:56 AM Reply

Then what you have to do is convert the side to a Movie Clip and give it this code:
onClipEvent(enterFrame){if(this.hitTest(_root.ball)){Speed*=-1;}}
It is not a bug,it is just that I havn't thought about it.Make sure that movie clip doesn't touch the top of the paddle.


BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 4th, 2005 @ 02:57 AM Reply

Sorry for double posting,type this code.
onClipEvent(enterFrame){if(this.hitTest(_root.ball)){speed*=-1;}}


BBS Signature
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to AS: make a pong game with physics Jun. 10th, 2005 @ 03:05 PM Reply

Well I got playing around at making my own pong game after spying this tutorial, I just thought it would be cool to post to show you how do to a nice curve effect on the ball, any of you who have played CurveBall the game weill know what I mean.
Curve Pong. Try slicing the ball with the paddle to curve it!
The only problem with me and my lazy coding is that the ball remains at zero _y change if it hits the paddle while it is motionless. I only really wanted to demonstrate the effect, plus its proving a bit too much effort to fix, so I'm just going to leave it as it is.

Here's the actionscript for the complete game, accompanied by the locations on which to put it. Anyone should be able to understand the basics from the above tutorial, I'll try to highlight were the effect has been implemented.
On the Paddle
onClipEvent(load){
var curveOne:Number = 0;
var curveTwo:Number = 0;

}
onClipEvent(enterFrame){
this._y = _root._ymouse;
curveTwo = curveOne;
curveOne = this._y;
_root.curveThree = (curveOne - curveTwo) * -1;

}

This basically measures the distance between the current _y of the paddle and it's previous _y from the last frame.

On the Ball
onClipEvent (load) {
this._y = Math.ceil(Math.random()*193)+87;
this._x = Math.ceil(Math.random()*550);
xForce = -5;
yForce = 5;
function rebound(prop:Number) {
prop = prop*-1;
return prop;
}
}
onClipEvent (enterFrame) {
this._y += yForce;
this._x += xForce;
if(yForce < (_root.curveFour / 2)){ //curves the ball
yForce+=0.2;
}
if(yForce > (_root.curveFour / 2)){
yForce-=0.2;
}

if (this._y<=_root.topY){ // y co-ordinates of top/bottom boundry mc's
yForce = rebound(yForce);
_root.curveFour = rebound(_root.curveFour);
}
if (this._y>=_root.bottomY) {
yForce = rebound(yForce);
_root.curveFour = rebound(_root.curveFour);
}
if (this.hitTest(_root.panelOne_mc)){
_root.curveFour = _root.curveThree;
xForce = rebound(xForce);
_root.panelOne_mc.play();
}
if (this.hitTest(_root.panelTwo_mc)) { // panel 2 is simply the fixed back wall
xForce = rebound(xForce);
}
}

I'm not going to translate too much, simply let you all take a look at the effect. This is only the most basic example, you could change it around so the curve is shallower and ends later when it is weaker, unlike in this exmaple where the ball finishes curving within the same boundry regardless of power.

Tell me what you think

T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to AS: make a pong game with physics Jun. 10th, 2005 @ 03:14 PM Reply

Just to bump this up a bit, I just realised you may be able to beat the "zero movement - zero curve" problem by experimenting with a mouseMove handler as opposed to enterFrame. Sorry for not seeing this earlier. My bad.

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 18th, 2005 @ 11:19 AM Reply

Hehe,you posted when I was in a trip for one week,I couldn't ...

*BUMP*


BBS Signature
Hoeloe
Hoeloe
  • Member since: Apr. 29, 2004
  • Offline.
Forum Stats
Member
Level 37
Game Developer
Response to AS: make a pong game with physics Jun. 19th, 2005 @ 03:41 PM Reply

My Paddle doesn't work!
It moves ok, but it doesn't do anything, the ball goes through it!


Song of the Firefly is on Steam Greenlight and Facebook. Give them a look and support the project!
------------------------------

BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jun. 22nd, 2005 @ 02:33 PM Reply

Are you sure the instance names are correct?


BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
isthatlegal
isthatlegal
  • Member since: May. 25, 2003
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: make a pong game with physics Jul. 2nd, 2005 @ 01:07 PM Reply

i am not too keen on the way the paddle hits the ball... it seems to hit it at weird angles... but it seems solid apart from that.

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Jul. 2nd, 2005 @ 01:20 PM Reply

At 7/2/05 01:07 PM, isthatlegal wrote: i am not too keen on the way the paddle hits the ball... it seems to hit it at weird angles... but it seems solid apart from that.

It was supposed to be a quite basic AS thread.

If you want to learn about complicated physics,try the links I gave.


BBS Signature
Zero-Lao
Zero-Lao
  • Member since: Apr. 14, 2004
  • Offline.
Forum Stats
Member
Level 05
Blank Slate
Response to AS: make a pong game with physics Sep. 1st, 2005 @ 03:46 PM Reply

Is there anyway to save this page of the forum in 'profile' page of an NG user?...

Otherwise, I just replied so it's easier for me to find it.

P.s. I just linked in from another site, that's why I'm not sure where exactly to find this page.

Thanks by the way for the tut.

icpfreek
icpfreek
  • Member since: Aug. 24, 2005
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to AS: make a pong game with physics Sep. 1st, 2005 @ 10:28 PM Reply

wow thanks!!! im making my first pong game now!!!

JCesta
JCesta
  • Member since: Jul. 8, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Sep. 15th, 2005 @ 11:20 PM Reply

for some reason reson the ball wont hit the paddle and the score wont increase by one, i have triple checked evrything, do u think it could be because i am using flash 8?

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Sep. 16th, 2005 @ 06:41 AM Reply

At 9/1/05 03:46 PM, Zero_Lao wrote: Is there anyway to save this page of the forum in 'profile' page of an NG user?...

I don't think so, but there are two easy ways:
1. Add it to the "favorites" list, every internet browser has one.
2. Type the link in your "Profile message".
Otherwise, just use the searchbar :)


Otherwise, I just replied so it's easier for me to find it.

Heh, it will get to page 5 in some hours...


P.s. I just linked in from another site, that's why I'm not sure where exactly to find this page.

What do you mean? Is my tutorial famous? =P


Thanks by the way for the tut.

No problem.


BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Sep. 16th, 2005 @ 06:49 AM Reply

At 9/15/05 11:20 PM, JCesta wrote: for some reason reson the ball wont hit the paddle and the score wont increase by one, i have triple checked evrything, do u think it could be because i am using flash 8?

It could be, but it's not expected.
Actually, there's a possibility that the score doesn't work because of the variables.
Try changing the variables to "var score = blah" or "var score: Number = blah" instead of "score = blah".
Maybe hitTest works differently with flash 8, use getBounds and it should work fine.

At 9/1/05 10:28 PM, icpfreek wrote: wow thanks!!! im making my first pong game now!!!

No problem, good for you ;D
I've been thinking on making a second tutorial, I'll try to sort out very basic 3D physics/ collisions.


BBS Signature
JCesta
JCesta
  • Member since: Jul. 8, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Sep. 16th, 2005 @ 03:53 PM Reply

i fixed the paddle problem but now i am working on the variable problems, i already have it set st var score=0 so i also tried changing all the variable names to sumthing else but that didnt help either

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: make a pong game with physics Sep. 16th, 2005 @ 05:00 PM Reply

At 9/16/05 03:53 PM, JCesta wrote: i fixed the paddle problem but now i am working on the variable problems, i already have it set st var score=0 so i also tried changing all the variable names to sumthing else but that didnt help either

Did you check out your own thread? It has been answered.
It means you've fixed all the problems, right? :D


BBS Signature