flutter flame get a resolution

In this blog post, we will try to tell our users how they can solve the issue of flutter flame to get a resolution. In this problem the user gets to know about the resolution size of different objects that they can fit as per their screen size. It is a very useful functionality for the developers as they get to design their website or application precisely. 

 

 

Solution of flutter flame get a resolution

To solve this problem of the most common solution is to use the Fixed Resolution Viewport. While using this functionality one thing users should keep in mind is that they should always use the smallest square. This practice is considered as they can alter the size of the square at a later time as per their requirement. To implement this function one should follow the following lines:

 

 

class MyGame extends FlameGame {

Future<void> onLoad() async {

double maxSide = min(size.x, size.y);

camera.viewport = FixedResolutionViewport(Vector2.all(maxSide));

}
}

 

 

Another important concept is for insider components. It means if the user wants the objects inside another component then they should use the HasGameRef function and the same goes with the variable size as well. One should follow these lines to implement this:

 

 

class MyComponent extends Component with HasGameRef {

MyComponent() : super(anchor: Anchor.center);

Future<void> onLoad() async {

final gameSize = gameRef.size;

// For instance, to add a position component in the screen's middle


// (when the camera isn't moved)


position = gameSize/2;
}
}

 

 

For more variety of sizes, one should try games.camera and games.camera.viewport. 

 

 

Also Read: What is Convolutional Neural Network and Working