Flutter二维物理引擎插件easy_physics_2d的使用

Flutter二维物理引擎插件easy_physics_2d的使用

安装

  1. 将此插件添加到你的pubspec.yaml文件中。
    dependencies:
  easy_physics_2d: '^0.0.1'
  2. 安装它。
    $ pub get
  3. 导入。
    import 'package:easy_physics_2d/easy_physics_2d.dart';

使用

这是使用该插件最基础的代码。你可以添加一个GravityField小部件，并将你想要放入场中的物理对象列表添加进去。

List<dynamic> objList = [];
var ball;

[@override](/user/override)
void initState(){
  super.initState();
  ball = myBall(  
    xPoint: 100,  
    yPoint: 200,  
    xVelocity: 0,  
    yVelocity: 0,  
    ballRadius: 30,  
    ballMass: 0.5,  
    angularVelocity: 0,  
  );
  objList = [ball];
}

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: GravityField(  
      objects: objList,  
      mapX: 350,  
      mapY: 350,  
      mapColor: Colors.white  
    ),
  );
}

你还可以更改字段的详细属性，例如重力、摩擦系数和弹性系数。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: GravityField(  
      objects: objList,  
      gravity: 1500,  
      mapX: 350,  
      mapY: 350,  
      mapColor: Colors.white,
      frictionConstant: 0.8,
      elasticConstant: 0.9,
    ),
  );
}

对于球体对象，你也可以改变设计。

class _HomePageState extends State<HomePage> {  
  Paint paint1 = Paint()  
    ..color = Color(0xff263e63)  
    ..style = PaintingStyle.stroke  
    ..strokeWidth = 2;  

  Paint paint2 = Paint()  
    ..color = Color(0xff15693b)  
    ..style = PaintingStyle.stroke  
    ..strokeWidth = 2;  

  List<Paint> paintList = [];  

  Path draw1 = Path();  
  Path draw2 = Path();  
  
  var ball;  
  var ball2;  
  
  [@override](/user/override)  
  void initState() {  
    super.initState();  
    for (double i = 0; i < 20 - 1; i++) {  
      draw1.arcTo(Rect.fromCircle(radius: i, center: Offset(0, 0,)), 0, (1.5 * pi), true);  
      draw2.arcTo(Rect.fromCircle(radius: i, center: Offset(0, 0,)), 1.5 * pi, 0.5 * pi, true);  
    }  

    paintList=[paint1, paint2];  

    ball = myBall(  
      xPoint: 100,  
      yPoint: 200,  
      xVelocity: 0,  
      yVelocity: 0,  
      ballRadius: 30,  
      ballMass: 0.5,  
      angularVelocity: 0,  
      ballPaint: paintList,
      ballPath: [draw1, draw2], 
    );  
    ball2 = myBall(  
      xPoint: 150,  
      yPoint: 100,  
      xVelocity: 0,  
      yVelocity: 0,  
      ballRadius: 20,  
      ballMass: 0.5,  
      angularVelocity: 0,  
    );  
    objList = [ball, ball2];  
  }
}

通过参数ballPath和ballPaint，你可以改变球体的路径和颜色。此时，ballPath列表和ballPaint列表的长度应该相同，并且它们应在initState中定义。

每个对象都有以下实例方法，使用起来非常方便。

var ball = myBall(  
  xPoint: 100,  
  yPoint: 200,  
  xVelocity: 0,  
  yVelocity: 0,  
  ballRadius: 30,  
  ballMass: 0.5,  
  angularVelocity: 0,  
); 

double n;
double m;
int range1 = 100;
int range2 = 1500;
double x, y;

ball.addXpos(n); //返回 void
ball.subXpos(n); //返回 void
ball.addYpos(n); //返回 void
ball.subYpos(n); //返回 void

ball.addXvel(m); //返回 void
ball.subXvel(m); //返回 void
ball.addYvel(m); //返回 void
ball.subYvel(m); //返回 void

ball.stop(); //返回 void
ball.shuffle(range1, range2); //返回 void : 设置从range1到range2的随机速度

ball.setPosition(x, y); //返回 void
ball.addAngle(n); //返回 void

ball.isBallRegion(x, y); //如果(x, y)在球体区域内，则返回true

ball.updateDraw(); //返回 void : 如果你想改变位置，你应该运行此方法。

如果你想移动球体，请使用这些实例方法进行控制。

完整示例

下面是完整的示例代码：

import 'dart:math';
import 'package:easy_physics_2d/gravity_field.dart';
import 'package:easy_physics_2d/objects.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class colorLibrary {
  static Color mainColor2 = const Color.fromARGB(255, 255, 248, 235);
  static Color mapColor = const Color(0xffefe0c3);
  static Color mainColor = const Color.fromARGB(255, 214, 237, 255);
  static Color buttonColor = const Color(0xffffd6a9);
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final newTextTheme = Theme.of(context).textTheme.apply(
      bodyColor: Colors.white70,
      displayColor: Colors.black87,
    );

    return MaterialApp(
        title: 'Flutter Physics World',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            scaffoldBackgroundColor: colorLibrary.mainColor2,
            textTheme: newTextTheme),
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double sliderValue = 1000;

  Paint paint1 = Paint()
    ..color = Color(0xff263e63)
    ..style = PaintingStyle.stroke
    ..strokeWidth = 2;

  Paint paint2 = Paint()
    ..color = Color(0xff15693b)
    ..style = PaintingStyle.stroke
    ..strokeWidth = 2;

  List<Paint> paintList = [];
  List<dynamic> objList = [];

  Path draw1 = Path();
  Path draw2 = Path();

  var ball;
  var ball2;

  [@override](/user/override)
  void initState() {
    super.initState();

    for (double i = 0; i < 20 - 1; i++) {
      draw1.arcTo(
          Rect.fromCircle(
            radius: i,
            center: Offset(
              0,
              0,
            ),
          ),
          0,
          (1.5 * pi),
          true);

      draw2.arcTo(
          Rect.fromCircle(
            radius: i,
            center: Offset(
              0,
              0,
            ),
          ),
          1.5 * pi,
          0.5 * pi,
          true);
    }

    paintList=[paint1, paint2];
    ball = myBall(
        xPoint: 100,
        yPoint: 200,
        xVelocity: 0,
        yVelocity: 0,
        ballRadius: 30,
        ballMass: 0.5,
        angularVelocity: 0,
        ballPaint: paintList
    );
    ball2 = myBall(
      xPoint: 150,
      yPoint: 100,
      xVelocity: 0,
      yVelocity: 0,
      ballRadius: 20,
      ballMass: 0.5,
      angularVelocity: 0,
      ballPath: [draw1, draw2],
    );
    objList = [ball, ball2];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buldBody(),
    );
  }

  Widget _buldBody() {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            "Flutter Physics",
            style: TextStyle(
                fontWeight: FontWeight.w800,
                fontSize: 40,
                color: Colors.black45),
          ),

          Container(
            child: GravityField(
              objects: objList,
              gravity: sliderValue,
              mapX: 350,
              mapY: 350,
              mapColor: colorLibrary.mapColor,
            ),
            padding: EdgeInsets.all(1),
          ),

          Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
            Container(
              height: 60,
              width: 60,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: colorLibrary.buttonColor),
              child: IconButton(
                icon: Icon(Icons.stop_circle_outlined,
                    color: Colors.white, size: 40),
                onPressed: () {
                  for (int i = 0; i < objList.length; i++) {
                    objList[i].stop();
                  }
                },
              ),
            ),
            Container(
              height: 60,
              width: 60,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: colorLibrary.buttonColor),
              child: IconButton(
                icon: Icon(Icons.shuffle, color: Colors.white, size: 40),
                onPressed: () {
                  for (int i = 0; i < objList.length; i++) {
                    objList[i].shuffle(100, 1500);
                  }
                },
              ),
            ),

            Row(
              children: [
                Text('Gravity :', style: TextStyle(fontSize: 20, color: Colors.brown),),
                SliderTheme(
                  data: SliderThemeData(
                    activeTrackColor: Colors.brown,
                    thumbColor: Colors.brown,
                    activeTickMarkColor: Colors.brown,
                    valueIndicatorColor: Colors.brown,
                    valueIndicatorShape: PaddleSliderValueIndicatorShape(),
                  ),
                  child: Slider(
                    value: sliderValue,
                    min: 0.0,
                    max: 3000.0,
                    divisions: 50,
                    label: '${sliderValue.toInt()}',
                    onChanged: (double newValue) {
                      setState(() {
                        sliderValue = newValue;
                        ball.yAcc = newValue;
                        ball2.yAcc = newValue;
                      });
                    },
                  ),
                ),
              ],
            ),
          ])
        ],
      ),
    );
  }
}

更多关于Flutter二维物理引擎插件easy_physics_2d的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter二维物理引擎插件easy_physics_2d的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


easy_physics_2d 是一个用于 Flutter 的二维物理引擎插件，旨在简化物理模拟的实现。它提供了一个简单的 API，使开发者可以轻松地在 Flutter 应用中创建物理效果，如重力、碰撞检测、刚体运动等。

安装

首先，你需要在 pubspec.yaml 文件中添加 easy_physics_2d 作为依赖项：

dependencies:
  easy_physics_2d: ^0.1.0  # 请使用最新版本

然后，运行 flutter pub get 来安装插件。

基本使用

以下是一个简单的示例，展示了如何使用 easy_physics_2d 创建一个基本的物理场景。

import 'package:flutter/material.dart';
import 'package:easy_physics_2d/easy_physics_2d.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PhysicsScreen(),
    );
  }
}

class PhysicsScreen extends StatefulWidget {
  [@override](/user/override)
  _PhysicsScreenState createState() => _PhysicsScreenState();
}

class _PhysicsScreenState extends State<PhysicsScreen> {
  late PhysicsWorld world;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 创建一个物理世界，设置重力
    world = PhysicsWorld(gravity: Vector2(0, 9.8));

    // 创建一个地面
    world.addBody(PhysicsBody.rectangle(
      position: Vector2(0, 300),
      size: Vector2(400, 20),
      isStatic: true,
    ));

    // 创建一个动态矩形
    world.addBody(PhysicsBody.rectangle(
      position: Vector2(100, 0),
      size: Vector2(50, 50),
      isStatic: false,
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Easy Physics 2D')),
      body: PhysicsWorldWidget(
        world: world,
        child: CustomPaint(
          size: Size.infinite,
          painter: PhysicsPainter(world),
        ),
      ),
    );
  }
}

class PhysicsPainter extends CustomPainter {
  final PhysicsWorld world;

  PhysicsPainter(this.world);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    for (var body in world.bodies) {
      final rect = Rect.fromCenter(
        center: Offset(body.position.x, body.position.y),
        width: body.size.x,
        height: body.size.y,
      );
      canvas.drawRect(rect, Paint()..color = Colors.blue);
    }
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
回到顶部