Development/Tutorials/Games/KGLEngine2d - Revision history

Neverendingo: Text replace - "" to ""

2011-06-29T20:51:33Z

Text replace - "</code>" to "</syntaxhighlight>"

Neverendingo: Text replace - "`" to ""`


2011-06-29T20:28:55Z
Text replace - "<code cppqt>" to "<syntaxhighlight lang="cpp-qt">"

				
				
				
				
			
			← Older revision
			Revision as of 20:28, 29 June 2011
			
Line 35:
Line 35:
  ==Starting Point : the main.cpp==   ==Starting Point : the main.cpp==
  Every application needs one, so let's start with it, as it is really simple.   Every application needs one, so let's start with it, as it is really simple.
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  #include <KApplication>   #include <KApplication>
  #include <KAboutData>   #include <KAboutData>
Line 77:
Line 77:
  Everything else could have been done in the main, or anywhere else, using a simple slot and the engine power, but this tutorial takes the object-oriented approach.   Everything else could have been done in the main, or anywhere else, using a simple slot and the engine power, but this tutorial takes the object-oriented approach.
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  #include "pongengine.h"   #include "pongengine.h"
  #include "ball.h"   #include "ball.h"
Line 130:
Line 130:
  The third and fourth ones are the goals, so we can detect when the ball's gone past a player's racket. The goals are set to be black, this should not be done this way, they should be given an image instead, but, hey, this is a code example and i wanted to show you how to draw a simple colored rectangle.   The third and fourth ones are the goals, so we can detect when the ball's gone past a player's racket. The goals are set to be black, this should not be done this way, they should be given an image instead, but, hey, this is a code example and i wanted to show you how to draw a simple colored rectangle.
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
       player1Racket = new Racket();        player1Racket = new Racket();
       player1Racket->setPosition(-width() / 2, -wallThickness - 1);        player1Racket->setPosition(-width() / 2, -wallThickness - 1);
Line 162:
Line 162:
    
  Now, let's define which keys we'll be using:   Now, let's define which keys we'll be using:
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
       KAction *up = m_collection->addAction("p1_up");        KAction *up = m_collection->addAction("p1_up");
       up->setShortcut(Qt::Key_Z);        up->setShortcut(Qt::Key_Z);
Line 178:
Line 178:
    
  Next is the collision detection and automatic moving of items system:   Next is the collision detection and automatic moving of items system:
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
       physicsEngine()->setItemTypeMovable(player1Racket);        physicsEngine()->setItemTypeMovable(player1Racket);
       physicsEngine()->setItemTypeMovable(ball);        physicsEngine()->setItemTypeMovable(ball);
Line 196:
Line 196:
    
  Then, we add the scoreBoards :   Then, we add the scoreBoards :
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
       player1ScoreBoard = new KGLTextItem("0");        player1ScoreBoard = new KGLTextItem("0");
       player1ScoreBoard->setPosition(200, height() / 2 - wallThickness - 60);        player1ScoreBoard->setPosition(200, height() / 2 - wallThickness - 60);
Line 212:
Line 212:
  These are simple text items, displaying each player's score.   These are simple text items, displaying each player's score.
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
       qsrand(QTime::currentTime().msec());        qsrand(QTime::currentTime().msec());
       lastScorer = (qrand() > RAND_MAX / 2);        lastScorer = (qrand() > RAND_MAX / 2);
Line 224:
Line 224:
    
  Let's take a look at the Ball and Racket headers :   Let's take a look at the Ball and Racket headers :
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  #ifndef KGL_BALL_H   #ifndef KGL_BALL_H
  #define KGL_BALL_H   #define KGL_BALL_H
Line 246:
Line 246:
  </code>   </code>
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  #ifndef KGL_RACKET_H   #ifndef KGL_RACKET_H
  #define KGL_RACKET_H   #define KGL_RACKET_H
Line 266:
Line 266:
  Now let's take a look at the constructors:   Now let's take a look at the constructors:
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  Ball::Ball()   Ball::Ball()
           : KGLItem(QRectF(0, 0, 10, 10))            : KGLItem(QRectF(0, 0, 10, 10))
Line 273:
Line 273:
  </code>   </code>
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  Ball::Ball()   Ball::Ball()
           : KGLItem(QRectF(0, 0, 10, 10))            : KGLItem(QRectF(0, 0, 10, 10))
Line 284:
Line 284:
  The interesting thing right now is in the collidingWith function :   The interesting thing right now is in the collidingWith function :
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  void Ball::collidingWith(KGLItemBase *item)   void Ball::collidingWith(KGLItemBase *item)
  {   {
Line 301:
Line 301:
  We iterate on the colliding items, and depending on their type, we act. If we are colliding with a wall, we invert our vertical speed. If we are colliding with a racket, we invert our horizontal speed. If we are colliding with a goal, then we emit a signal to let the engine know it.   We iterate on the colliding items, and depending on their type, we act. If we are colliding with a wall, we invert our vertical speed. If we are colliding with a racket, we invert our horizontal speed. If we are colliding with a goal, then we emit a signal to let the engine know it.
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  void Racket::collidingWith(KGLItemBase* item)   void Racket::collidingWith(KGLItemBase* item)
  {   {



Dridk at 12:29, 23 February 2009
2009-02-23T12:29:30Z


				
				
				
				
			
			← Older revision
			Revision as of 12:29, 23 February 2009
			
Line 23:
Line 23:
    
  ==Abstract==   ==Abstract==
  + TUTORIAL NEED TO BE UPDATE
  KGLEngine2d is a recent try to develop a 2D game engine using OpenGL, and powerful enough to deliver complex and beautiful games.   KGLEngine2d is a recent try to develop a 2D game engine using OpenGL, and powerful enough to deliver complex and beautiful games.
  As of now, version 1.0 is not even out, but the API is stable enough for anyone to start playing with the engine.   As of now, version 1.0 is not even out, but the API is stable enough for anyone to start playing with the engine.



Smarter: Updated the tutorial: better wording, new code and more accurate explications
2009-01-21T16:28:27Z
Updated the tutorial: better wording, new code and more accurate explications
Show changes


Packadal at 13:26, 1 November 2008
2008-11-01T13:26:18Z


				
				
				
				
			
			← Older revision
			Revision as of 13:26, 1 November 2008
			
Line 63:
Line 63:
  So, what are we doing ?   So, what are we doing ?
  Initializing the KApplication, and creating an instance of our main class, the one that subclasses KGLEngine2d. Then we tell him to show himself, and that's all. I told you there was nothing exciting in here :)   Initializing the KApplication, and creating an instance of our main class, the one that subclasses KGLEngine2d. Then we tell him to show himself, and that's all. I told you there was nothing exciting in here :)
  + 
  + ==KGLEngine2d type system==
  + 
  + KGLEngine uses user-defined objects types to refine the collision detection system. The default type is the parent object's className. The possibility to define the object's type at construction time allows for simple items to be created, wothout the need to put them in a class.
    
  ==The KGLEngine2d pong engine==   ==The KGLEngine2d pong engine==
Line 151:
Line 155:
  Now, the collision detection and automatic moving items system :      Now, the collision detection and automatic moving items system :   
  <code cppqt>   <code cppqt>
− setItemTypeMovable(RACKET_TYPE); + setItemTypeMovable(Racket::staticMetaObject.className());
− setItemTypeMovable(BALL_TYPE); + setItemTypeMovable(Ball::staticMetaObject.className());
    
− addItemCollisionRule(BALL_TYPE, RACKET_TYPE); + addItemCollisionRule(Ball::staticMetaObject.className(), Racket::staticMetaObject.className());
− addItemCollisionRule(BALL_TYPE, WALL_TYPE); + addItemCollisionRule(Ball::staticMetaObject.className(), WALL_TYPE);
− addItemCollisionRule(BALL_TYPE, GOAL_TYPE); + addItemCollisionRule(Ball::staticMetaObject.className(), GOAL_TYPE);
    
− addItemCollisionRule(RACKET_TYPE, WALL_TYPE); + addItemCollisionRule(Racket::staticMetaObject.className(), WALL_TYPE);
  </code>   </code>
    
Line 219:
Line 223:
  <code cppqt>   <code cppqt>
  Ball::Ball()   Ball::Ball()
− :KGLItem(BALL_TYPE, RECT(0, 0, 10, 10)) + :KGLItem(Ball::staticMetaObject.className(),, RECT(0, 0, 10, 10))
  {   {
  }   }
Line 226:
Line 230:
  <code cppqt>   <code cppqt>
  Racket::Racket()   Racket::Racket()
− :KGLItem(RACKET_TYPE, RECT(0, 0, 10, 30)) + :KGLItem(Racket::staticMetaObject.className(),, RECT(0, 0, 10, 30))
  {   {
  }   }



Packadal at 09:37, 30 October 2008
2008-10-30T09:37:21Z


				
				
				
				
			
			← Older revision
			Revision as of 09:37, 30 October 2008
			
Line 96:
Line 96:
    
  So, what happens there ?   So, what happens there ?
− First, we set the coordinates system. We tell the engine to show us a region of 640 pixels of width, and 480 of height. This only affects the rendered view, not the window size. + First, we set the coordinates system. We tell the engine to show us a region of 640 pixels of width, and 480 of height. This only affects the rendered view, not the window size. This means we are creating a region in which the user will see what will be drawn. Any item outside the square of width and height specified, and centered around 0 will be drawn out of the screen.
  + //NEEDS AN IMAGE TO EXPLAIN EASILY
  +  
  Then we create and add items to the engine, no more.   Then we create and add items to the engine, no more.
  The KGLItem constructor can be called without any argument, but can also be given two : the item type, used for collision detection, and the dimensions of the item.   The KGLItem constructor can be called without any argument, but can also be given two : the item type, used for collision detection, and the dimensions of the item.
Line 122:
Line 124:
  </code>   </code>
    
− Now we create the players' rackets and the ball. These are special classes that will be explained a bit later. + Now we create the players' rackets and the ball. These are special classes that will be explained a bit later. Sprites get their size directly from the image you give them as a parameter, so unlike KGLItem, you do not need to specify the size of a KGLSpriteitem. The POINT passed as argument (optionally) is the repeat pattern of the texture, eg POINT(1,2) means your texture will be drawn two times ihorizontally, in the rectanle defined by the image's size.
  + The picture below show how a sprite created with the default point (1,1) would like with a POINT(1,2) : 
  +  
  + [[image:bloc-example.png]]
  +  
  +  
  They might have been simple KGLSprites, and the collisions would have been managed in another function connected to the KGLItem::colliding(PhysicsItem*) function. But, again, let's take the Object Oriented way.   They might have been simple KGLSprites, and the collisions would have been managed in another function connected to the KGLItem::colliding(PhysicsItem*) function. But, again, let's take the Object Oriented way.
  We also connect the ball's enterGoal signal with the score slot, so when the ball enters a goal, the engine will be told, and will update the score.   We also connect the ball's enterGoal signal with the score slot, so when the ball enters a goal, the engine will be told, and will update the score.





Smarter: some typo fixes and wording changes
2008-10-28T11:17:40Z
some typo fixes and wording changes

				
				
				
				
			
			← Older revision
			Revision as of 11:17, 28 October 2008
			
Line 23:
Line 23:
    
  ==Abstract==   ==Abstract==
− KGLEngine2d is a recent try to develop a 2D games engine using openGL, and powerful enough to deliver complex and beautiful games. + KGLEngine2d is a recent try to develop a 2D game engine using openGL, and powerful enough to deliver complex and beautiful games.
  As of now, version 1.0 is not even out, but the API is stable enough for anyone to start playing with the engine.   As of now, version 1.0 is not even out, but the API is stable enough for anyone to start playing with the engine.
  Through this tutorial I will explain how to use a great part of the engine, included but not limited to : sprites creation, rotation and deplacement and collision detection.   Through this tutorial I will explain how to use a great part of the engine, included but not limited to : sprites creation, rotation and deplacement and collision detection.
Line 33:
Line 33:
    
  ==Starting Point : the main.cpp==   ==Starting Point : the main.cpp==
− Every application need one, so let's start with it, as it really is simple. + Every application needs one, so let's start with it, as it is really simple.
  <code cppqt>   <code cppqt>
  #include <KApplication>   #include <KApplication>
Line 66:
Line 66:
  ==The KGLEngine2d pong engine==   ==The KGLEngine2d pong engine==
    
− Now, as we want a bit of sophisticated features, we will have to surclass the KGLEngine2d. + Now, as we want a bit of sophisticated features, we will have to subclass the KGLEngine2d.
    
− Namely, those sophisticated actions, that forces us to surclass are the keyboard interactions. As of now, those are managed in the engine's mainLoop, and there are no alternatives to use them otherwise. + Namely, those sophisticated actions, that forces us to subclass are the keyboard interactions. As of now, those are managed in the engine's mainLoop, and there are no alternatives to use them otherwise.
− Everything else could have been done in the main, or anywhere else, using a simple slot and the engine power, but I will use the Object-Oriented conception int this tutorial. + Everything else could have been done in the main, or anywhere else, using a simple slot and the engine power, but I will use the Object-Oriented conception in this tutorial.
    
    
Line 96:
Line 96:
    
  So, what happens there ?   So, what happens there ?
− First, we set the coordinates system. We tell the engine to show us a region of 640pixels of width, and 480 of height. This only affects the rendered view, not the window size. + First, we set the coordinates system. We tell the engine to show us a region of 640 pixels of width, and 480 of height. This only affects the rendered view, not the window size.
  Then we create and add items to the engine, no more.   Then we create and add items to the engine, no more.
− The KGLItem constructor need no arguments, but can be given two : the item type, used for collision detection, and the dimensionts of the item. + The KGLItem constructor can be called without any argument, but can also be given two : the item type, used for collision detection, and the dimensions of the item.
− Here, we dim the items according to what we want them to do : The walls are as large as usefull, but dim, and the goals are as tall as needed to cover the whole area, but dim. + Here, we change the items' dimensions according to what we want them to represent : The walls have to be wide but thin, same for the goals, except they're vertical and not horizontal.
− The first two items are there so the ball will bounce when it reaches the top or bottom of the screen. + The first two items are there so the ball will bounce when it reaches the top or the bottom of the screen.
  The third and fourth ones are the goals, so we can detect when the ball's gone past a player's racket. The goals are set to be black, this should not be done this way, they should be given an image instead, but, hey, this is a code example and i wanted to show you how to draw a simple colored rectangle.   The third and fourth ones are the goals, so we can detect when the ball's gone past a player's racket. The goals are set to be black, this should not be done this way, they should be given an image instead, but, hey, this is a code example and i wanted to show you how to draw a simple colored rectangle.
    
Line 122:
Line 122:
  </code>   </code>
    
− Now we create the player's rackets and the ball. These are special classes that will be explained a bit later. + Now we create the players' rackets and the ball. These are special classes that will be explained a bit later.
  They might have been simple KGLSprites, and the collisions would have been managed in another function connected to the KGLItem::colliding(PhysicsItem*) function. But, again, let's take the Object Oriented way.   They might have been simple KGLSprites, and the collisions would have been managed in another function connected to the KGLItem::colliding(PhysicsItem*) function. But, again, let's take the Object Oriented way.
  We also connect the ball's enterGoal signal with the score slot, so when the ball enters a goal, the engine will be told, and will update the score.   We also connect the ball's enterGoal signal with the score slot, so when the ball enters a goal, the engine will be told, and will update the score.
Line 157:
Line 157:
  This way, we only will have to set these item's speed for them to move.   This way, we only will have to set these item's speed for them to move.
    
− By default, an item can not collide with other items, so we need to define the collision rules in order to use the physics engine. + By default, an item can't collide with other items, so we need to define the collision rules in order to use the physics engine.
  Then, we add collision detection rules. We say that an item of type BALL_TYPE can only collide with items of type RACKET_TYPE, WALL_TYPE, and GOAL_TYPE (which, in this case, is pretty much everything).   Then, we add collision detection rules. We say that an item of type BALL_TYPE can only collide with items of type RACKET_TYPE, WALL_TYPE, and GOAL_TYPE (which, in this case, is pretty much everything).
    
Line 207:
Line 207:
  </code>   </code>
    
− We just define KGLItems with nothing really special, but when we will change the ball and rackets from simple white squares to sprites, this will prove to be usefull. + We just define KGLItems with nothing really special, but when we will change the ball and rackets from simple white squares to sprites, this will prove to be useful.
− Now let's look at the constructors: + Now let's take a look at the constructors:
    
  <code cppqt>   <code cppqt>



Tampakrap at 10:09, 28 October 2008
2008-10-28T10:09:53Z


				
				
				
				
			
			← Older revision
			Revision as of 10:09, 28 October 2008
			
Line 62:
Line 62:
  </code>   </code>
  So, what are we doing ?   So, what are we doing ?
− Initializing the KApplication, and creating an instance of our main class, the one that surclasses KGLEngine2d. Then we tell him to show himself, and that's all. I told you there was nothing exciting in here :) + Initializing the KApplication, and creating an instance of our main class, the one that subclasses KGLEngine2d. Then we tell him to show himself, and that's all. I told you there was nothing exciting in here :)
    
  ==The KGLEngine2d pong engine==   ==The KGLEngine2d pong engine==



Tampakrap: typo roght -> right
2008-10-28T07:48:45Z
typo roght -> right

				
				
				
				
			
			← Older revision
			Revision as of 07:48, 28 October 2008
			
Line 180:
Line 180:
  </code>   </code>
    
− Lastly, we define randomly who scored last, which defines the direction the ball will take (left or roght). + Lastly, we define randomly who scored last, which defines the direction the ball will take (left or right).
    
  ==The Ball and Racket Classes==   ==The Ball and Racket Classes==



Smarter: typo fix
2008-10-27T21:40:59Z
typo fix

				
				
				
				
			
			← Older revision
			Revision as of 21:40, 27 October 2008
			
Line 58:
Line 58:
  	pong.show();   	pong.show();
    
− 	return app.exec();; + 	return app.exec();
  }   }
  </code>   </code>

@@ Line 61: / Line 61: @@
      return app.exec();
+}
-</code>
+</syntaxhighlight>
 So, what's happening here?
 We initialize the KApplication, and create an instance of our main class, the one that will subclass KGLEngine2d. Then we tell the engine to show itself, and that's all. I told you there was nothing really exciting there :)
@@ Line 118: / Line 118: @@
      player2Goal->setObjectName(GOAL_TYPE);
      addItem(player2Goal);
-</code>
+</syntaxhighlight>
 So, what happens there ?
@@ Line 149: / Line 149: @@
      connect(ball, SIGNAL(enterGoal(int)), this, SLOT(score(int)));
-</code>
+</syntaxhighlight>
 Here we create the rackets and the ball. These are special classes that will be explained a bit later. Sprites get their size directly from the image you give them as a parameter, so unlike KGLItem, you do not need to specify the size of a KGLSpriteitem. The QPointF passed as argument (optionally) is the repeat pattern of the texture, eg QpointF(1,2) means your texture will be drawn two times horizontally, in the rectanle defined by the image's size.
@@ Line 174: / Line 174: @@
      KAction *start = m_collection->addAction("start");
      start->setShortcut(Qt::Key_Space);
-</code>
+</syntaxhighlight>
 We add every action we are going to use, using their names, and then we define their keys.
@@ Line 187: / Line 187: @@
      physicsEngine()->addCollisionRule(player1Racket, NWall);
-</code>
+</syntaxhighlight>
 First, we tell the engine to call the move() function of each and every item of type RACKET_TYPE and BALL_TYPE, at each call of the mainLoop.
@@ Line 208: / Line 208: @@
      player2ScoreBoard->setZIndex(2);
      addItem(player2ScoreBoard);
-</code>
+</syntaxhighlight>
 These are simple text items, displaying each player's score.
@@ Line 217: / Line 217: @@
      startGame();
-</code>
+</syntaxhighlight>
 Finally, we use a random value to determine who scored last, which defines the direction the ball will take (left or right), and we call startGame() which will repeatedly calls the mainLoop() function.
@@ Line 244: / Line 244: @@
 #endif //KGL_BALL_H
-</code>
+</syntaxhighlight>
 <syntaxhighlight lang="cpp-qt">
@@ Line 261: / Line 261: @@
 #endif //KGL_RACKET_H
-</code>
+</syntaxhighlight>
 We just define KGLItems with nothing really special, but when we will change the ball and rackets from simple white squares to sprites, this will prove to be useful.
@@ Line 271: / Line 271: @@
+{
+}
-</code>
+</syntaxhighlight>
 <syntaxhighlight lang="cpp-qt">
@@ Line 278: / Line 278: @@
+{
+}
-</code>
+</syntaxhighlight>
 So we just define the width and height of the item, as we don't need anything more yet.
@@ Line 297: / Line 297: @@
+     }
+}
-</code>
+</syntaxhighlight>
 We iterate on the colliding items, and depending on their type, we act. If we are colliding with a wall, we invert our vertical speed. If we are colliding with a racket, we invert our horizontal speed. If we are colliding with a goal, then we emit a signal to let the engine know it.
@@ Line 309: / Line 309: @@
+     }
+}
-</code>
+</syntaxhighlight>
 Here, we iterate again, but there is only one possible reaction: if we hit a wall, then stop moving (and move back to somewhere away from the wall).
 </noinclude>