![\"Christian](\"https:\/\/miro.medium.com\/fit\/c\/96\/96\/2*33dep1N4p1DanY6KzQIz9A.jpeg\")
<\/div>\n<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n I<\/span> really like video games. And I like to create and develop software. So I started a lot of attempts to give game development a try, even with the fact in my mind that I can\u2019t even draw round circles on a sheet of paper\u2026 My goal is to have at least 5 posts describing the process and the involved tools. Let\u2019s start with the basic things you will need to get started. Besides a fully installed and working Flutter environment<\/a> we will make use of the following libraries:<\/p>\n The game we will create will render a maze on your screen and the player will control a ball rolling through it by moving his phone (gyroscope required). The goal is to get out of the maze as quick as possible. I will explain each package along the way \u2014 let\u2019s start and create a new project:<\/p>\n flutter create mazeball<\/strong><\/p>\n Add the mentioned libraries to your pubspec.yaml<\/strong> file. Please note that Box2D will be added automatically as soon as you add dependencies on Flame (as it is a part of it). The file should look like this:<\/p>\n Please remove the test folder after updating the pubspec<\/strong> file (the above file doesn\u2019t contain a reference to it anymore) because for now we do not create tests for our game.<\/p>\n We<\/span> will use Flame as our game engine. Flame does offer a nice set of features for 2D games. Sure, it\u2019s not the next Unity or Unreal but it is easy to use and will offer all we need. We need to initialize Flame and make sure our app creates and starts our game. I will explain each part now, feel free to skip if the code alone is fine. The file starts with our imports:<\/p>\n A<\/span>fter the import section the well known main() <\/strong>function, this time with the async <\/strong>keyword. This allows us to wait for other functions inside, exactly what we will do while calling setupFlame()<\/strong>. Below this call you can find the creation of our game object and the call to the build in runApp<\/strong>. Thanks to Flame, we have the handy widget<\/strong> property that we simply hand in and all starts. The setupFlame() <\/strong>function does the following:<\/p>\n You might have spotted the async <\/strong>keyword here, too. The setupFlame() <\/strong>function has to wait until the Util<\/strong> methods are finished.<\/p>\n Create a new file in the lib<\/strong> folder called game.dart <\/strong>and copy in the content below:<\/p>\n The class MazeBallGame<\/strong> is our main element, it extends the Game<\/strong> class offered by Flame. Thanks to the base class we don\u2019t have to build our own game loop or take care about resize events. It will also be the first element called by Flame to render\/draw and update all elements of our game. B<\/span>ox2D will take care of all our physic related operations. This includes handling of collisions, accelerating\/decelerating a body\/mass and simulating the different shapes\/materials in our game. A gravity of (0,1) would make sure elements are falling down from the top of the screen to the bottom. Keep in mind our coordinate system starts in the top left corner with (0,0).<\/p>\n A<\/span>fter the world has been created, we call initialize<\/strong> that will call resize as soon as the app is ready. Ready in this case means launched and Flame was able to check the display size. If all is set up correctly you should be able to start the app on your phone or simulator. I know, nothing special, just a black\/blank screen but this is how all great things start \ud83d\ude42<\/p>\n I<\/span> don\u2019t want to close the first part without drawing something \u2014 let\u2019s hack something in very quickly. Please replace the part from resize to update with the following code:<\/p>\n What happens in here is the following:<\/p>\n Inside the render function we have to perform this:<\/p>\n Starting the app now should render a small circle near the center of the screen like below. Keep in mind that this was just added to have something on the screen, we will remove it in our next step.<\/p>\n You got into contact with Flame, Box2D. You learned a little about vectors and what you need to get a basic game started. You even had a tiny lesson about gravity. Sure, we don\u2019t have the next AAA game on the screen, but we are on our way to build something using Flutter that will definitely be counted as a game.<\/p>\n In the next part we will add our player and the related movement\/physic we need to make him move by using the gyroscope. In case you would like a head start checkout demos for the Sensors<\/a> library or have a look at the (written in C++) Box2D examples<\/a>.<\/p>\n<\/div>\n
During the development of my Game of Life clone in Flutter (linked below) I decided to start again \u2014 I welcome you to my first series of posts about how to get \u201creal\u201d game done, using Flutter, Flame and Box2d.<\/p>\n
Head over to the main.dart file and replace it with the one below. Don\u2019t worry if you see any errors, we will solve them in a moment. In case you choose another name for the project change it accordingly.<\/p>\n\n
\n
You might have noticed the World<\/strong> object or _gravity<\/strong> property in the above file, below are all details about our game class.<\/p>\n
The two constant int properties are needed to create our World<\/strong> object; this happens during the construct of our MazeBall<\/strong> class. To set up the world you also need to define gravity (if this would be as easy as in the real world).
In our game gravity is not needed \u2014 so we define this as a zero Vector2<\/strong>. If you don\u2019t know what a vector is (in our case always a Vector2<\/strong>) imagine it as a point inside a coordinate system: each Vector2<\/strong> has an X<\/strong> and an Y<\/strong> value. Our _gravity<\/strong> vector is set to (0,0). A Vector3<\/strong> would have X<\/strong>, Y<\/strong> and Z <\/strong>and <\/strong>this would go on like this for Vector4,<\/strong> Vector5,<\/strong> etc.<\/p>\n
Below the resize method you will find the two mentioned methods from the start:<\/p>\n\n
\n
\n