Flame是一款基于Flutter的2D游戏引擎，今天我将使用它制作一款经典小游戏割绳子 ![ctr_preview.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d8e83fc5c6c4fe7b4bc471934ac2885~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=550&h=982&s=1184682&e=gif&f=56&b=dca362) # 基本物品准备 ## 添加游戏背景游戏的背景图片资源包含多个图片，这里通过`Sprite`的截取功能裁出来我们需要的部分，然后添加到游戏中作为背景 ```dart final bgSprite = await Sprite.load("bgr_01_hd.jpeg", images: images, srcSize: Vector2(770, 1036), srcPosition: Vector2(0, 0)); final bgComponent = SpriteComponent(sprite: bgSprite) ..anchor = Anchor.center ..position = Vector2(size.x * 0.5, size.y * 0.5); add(bgComponent); ``` ## 小怪兽小怪兽的Sprite Sheet图如下，想要使用它构建动画，需要知道每一个Sprite的大小以及偏移的位置，这些数据需要一些手段获取，我硬编码在了项目中。 ![image转存失败，建议直接上传图片文件](<转存失败，建议直接上传图片文件 https://note.youdao.com/yws/res/8/WEBRESOURCE86935d38a8b065269d96ad99639acc38>) 新建`CTRPlayer`类表示小怪兽，他继承自`PositionComponent` ```dart class CTRPlayer extends PositionComponent { ... } ``` 通过Sprite大小和偏移数据构建小怪兽的`Sprite`列表，使用`ImageComposition`整合出符合统一规范的`Sprite` ```dart Future> _genSpriteSlices() async { List sprites = []; final List> rects = [ ... ]; final List offsets = spriteOffsets(); for (int i = 0; i < rects.length; ++i) { final rect = rects[i]; final pos = Vector2(rect["x"]!, rect["y"]!); final size = Vector2(rect["M"]!, rect["U"]!); final sprite = await Sprite.load("char_animations.png", srcPosition: pos, srcSize: size, images: images); final offset = offsets[i]; final composition = ImageComposition() ..add(await sprite.toImage(), Vector2(offset.dx, offset.dy)); final composeImage = await composition.compose(); sprites.add(Sprite(composeImage)); } return sprites; } List spriteOffsets() { final List> raw = [ ... ]; List offsets = []; for (final pos in raw) { offsets.add(Offset(pos["x"]! - 76, pos["y"]! - 83)); } return offsets; } ``` 通过`SpriteAnimationGroupComponent`管理小怪兽的多个动画，`SpriteAnimationGroupComponent`可以将多组帧动画合并，并通过将`current`设置为对应状态值快速切换动画 ```dart final animMap = { CTRPlayerAnimState.reset: SpriteAnimation.spriteList( _sprites.sublist(0, 1), stepTime: 0.06, loop: true), CTRPlayerAnimState.eat: SpriteAnimation.spriteList( _sprites.sublist(27, 40), stepTime: 0.06, loop: false), CTRPlayerAnimState.idle1: SpriteAnimation.spriteList( _sprites.sublist(64, 83), stepTime: 0.06, loop: false), CTRPlayerAnimState.idle2: SpriteAnimation.spriteList( _sprites.sublist(53, 61), stepTime: 0.06, loop: false), }; _animationComponent = SpriteAnimationGroupComponent( animations: animMap, current: CTRPlayerAnimState.reset); ``` 接着我们让小怪兽在没吃到糖果前随机进行`idle1`和`idle2`两种动画，通过`_lastIdleAnimElapsedTime`控制每8s尝试播放一次`idle1`或者`idle2`动画 ```dart @override update(double dt) { super.update(dt); _lastIdleAnimElapsedTime += dt; if (_lastIdleAnimElapsedTime > 8 && _animationComponent.current == CTRPlayerAnimState.reset && _animationComponent.current != CTRPlayerAnimState.eat) { _lastIdleAnimElapsedTime = 0; final states = [CTRPlayerAnimState.idle1, CTRPlayerAnimState.idle2]; final state = states[Random().nextInt(states.length)]; _animationComponent.current = state; } } ``` ![ctr_player_anim.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/889b8de24df646138da756f5f2bd9c50~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=375&h=178&s=74647&e=gif&f=8&b=c98d50) 最后给小怪兽增加一个 duan\~ duan\~ duan\~ 的效果，通过`ScaleEffect`反复缩放实现 ```dart final charEffect = ScaleEffect.to( Vector2(1.1, 0.9), EffectController( duration: 0.6, reverseDuration: 0.3, infinite: true, curve: Curves.easeOutCubic)); _animationComponent.add(charEffect); ``` ![ctr_player_anim_duan.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d29c13cb7174ac08f0fc59e380cfefa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=375&h=178&s=130567&e=gif&f=27&b=ca8d51) ## 糖果新建`CTRCandy`类表示糖果，糖果只是简单的合并了前景图和背景图，原始素材上有闪光帧动画，想要添加的话，再增加一层`SpriteAnimationComponent`展示即可 ```dart final candyBg = await Sprite.load("obj_candy_01.png", images: images, srcPosition: Vector2(2, 2), srcSize: Vector2(87, 90)); _candyBgComponent = SpriteComponent(sprite: candyBg) ..anchor = Anchor.center ..position = Vector2(6, 13); add(_candyBgComponent); final candyFg = await Sprite.load("obj_candy_01.png", images: images, srcPosition: Vector2(2, 95), srcSize: Vector2(60, 60)); _candyFgComponent = SpriteComponent(sprite: candyFg) ..anchor = Anchor.center ..position = Vector2(0, 0); add(_candyFgComponent); ``` ![ctr_candy.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1daa922634aa4439a956374f104825bf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=278&h=113&s=36141&e=png&b=e4b06b) ## 固定点固定点和糖果类似，也只是简单的合并了前景图和背景图，新建了`CTRHook`类表示 ```dart final hookBg = await Sprite.load("obj_hook_01.png", images: images, srcPosition: Vector2(2, 2), srcSize: Vector2(50, 50)); final hookBgComponent = SpriteComponent(sprite: hookBg) ..anchor = Anchor.topLeft ..position = Vector2(0, 0); add(hookBgComponent); final hookFg = await Sprite.load("obj_hook_01.png", images: images, srcPosition: Vector2(2, 55), srcSize: Vector2(15, 14)); final hookFgComponent = SpriteComponent(sprite: hookFg) ..anchor = Anchor.center ..position = Vector2(25, 25); add(hookFgComponent); ``` ![ctr_hook.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53c40fff18264aa4be940d14758a08ed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=157&h=93&s=12802&e=png&b=f0c078) ## 星星星星包含两组动画，旋转和消失，新建`CTRStar`类表示并通过`SpriteAnimationGroupComponent`管理动画 ```dart final idleSprites = await _idleSprites(); final disappearSprites = await _disappearSprites(); final animMap = { CTRStarState.idle: SpriteAnimation.spriteList(idleSprites.sublist(1, 18), stepTime: 0.05, loop: true), CTRStarState.disappear: SpriteAnimation.spriteList( disappearSprites.sublist(0, 12), stepTime: 0.05, loop: false), }; _animationComponent = SpriteAnimationGroupComponent( animations: animMap, current: CTRStarState.idle); _animationComponent.position = Vector2(0, 0); _animationComponent.anchor = Anchor.topLeft; add(_animationComponent); ``` ![ctr_star.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/888240f26929404d8cbc8598238e7518~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=375&h=190&s=72219&e=gif&f=23&b=d49556) # 绳子模拟创建`CTRRope`类表示绳子 ## 物理模拟绳子的模拟采用了多个`BodyComponent`使用`RopeJoint`链接的方式实现，首先创建`CTRRopeSegment`表示绳子的一段，它继承自`BodyComponent`，主要支持物理模拟，不参与渲染 ```dart class CTRRopeSegment extends BodyComponent { final Offset pos; late Vector2 _size; bool isBreak = false; CTRRopeSegment({this.pos = const Offset(0, 0)}) { _size = Vector2(10, 10); renderBody = false; } @override Body createBody() { final bodyDef = BodyDef( type: BodyType.dynamic, userData: this, position: Vector2(pos.dx, pos.dy)); return world.createBody(bodyDef) ..createFixtureFromShape(CircleShape()..radius = _size.x * 0.5, density: 1, friction: 0, restitution: 0); } } ``` 接着还需要创建另一个类`CTRRopePin`，它和`CTRRopeSegment`类似，但是他不能动，用与将绳子的一头固定 ```dart class CTRRopePin extends BodyComponent { double size; Offset pos; CTRRopePin({this.size = 20, this.pos = const Offset(0, 20)}) { renderBody = false; } @override Body createBody() { final bodyDef = BodyDef( type: BodyType.static, userData: this, position: Vector2(this.pos.dx, this.pos.dy)); return world.createBody(bodyDef) ..createFixtureFromShape(CircleShape()..radius = size * 0.5, friction: 0.2, restitution: 0.5); } } ``` 万事俱备，将它们凑成一根绳子 ```dart final pin = CTRRopePin(pos: Offset(startPosition.dx, startPosition.dy)); add(pin); await Future.wait([pin.loaded]); const ropeSegLen = 8.0; final ropeSegCount = length ~/ ropeSegLen; final deltaOffset = (endPosition - startPosition); final space = deltaOffset.distance / ropeSegCount; final dirVec = deltaOffset / deltaOffset.distance; CTRRopeSegment? lastRopeSeg; for (int i = 0; i < ropeSegCount; ++i) { final seg = CTRRopeSegment(pos: dirVec * i.toDouble() * space + startPosition); add(seg); await Future.wait([seg.loaded]); final jointDef = RopeJointDef() ..bodyA = lastRopeSeg?.body ?? pin.body ..bodyB = seg.body ..maxLength = ropeSegLen; game.world.createJoint(RopeJoint(jointDef)); lastRopeSeg = seg; _ropSegs.add(seg); } ``` 首先创建`CTRRopePin`作为绳子的开端，然后通过各种参数计算出需要多少个`CTRRopeSegment`，最后通过`RopeJoint`逐个相连。打开`CTRRopeSegment`的`renderBody`，可以大致看出绳子的模拟效果 ![ctr_rope_raw.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f1489cda17745dda138f648c2cd6833~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=471&h=412&s=260475&e=gif&f=33&b=e5af67) ## 绳子渲染游戏中绳子是两种颜色相间的，我们可以在`CTRRope`的`void render(Canvas canvas)`中进行自定义绘制，首先准备好要绘制的点和两种颜色的`Paint` ```dart List points = []; points.add(startPosition); final paint1 = Paint() ..color = const Color(0xff815c3c) ..style = PaintingStyle.stroke ..strokeWidth = 5 ..strokeJoin = StrokeJoin.round ..strokeCap = StrokeCap.round; final paint2 = Paint() ..color = const Color.fromARGB(255, 65, 44, 27) ..style = PaintingStyle.stroke ..strokeWidth = 5 ..strokeJoin = StrokeJoin.round ..strokeCap = StrokeCap.round; for (int i = 0; i < _ropSegs.length; i++) { final currenPt = _ropSegs[i].position; points.add(Offset(currenPt.x, currenPt.y)); } ``` 接着每隔4段更换一次颜色，并通过`drawLine`绘制绳子 ```dart final newPoints = points; bool togglePaint = false; for (int i = 0; i < newPoints.length - 1; i++) { if (i % 4 == 0) { togglePaint = !togglePaint; } final paint = togglePaint ? paint1 : paint2; canvas.drawLine(Offset(newPoints[i].dx, newPoints[i].dy), Offset(newPoints[i + 1].dx, newPoints[i + 1].dy), paint); } ``` ![ctr_rope_render.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1aa4577ad1e54068a4faad9429594cc7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=470&h=412&s=281507&e=gif&f=38&b=e9b26b) ## 如何切断绳子切断绳子需要解决2个问题，一个是如何判断哪一段被切到，还有就是切完之后渲染不正确的问题。 ### 如何判断哪一段被切到我采用了一个简单的方案，创建一个继承自`BodyComponent`的类`CTRScissors`，手指移动时控制它的位置，如果它和`CTRRopeSegment`发生的碰撞，则从被碰撞的`CTRRopeSegment`处切断绳子 ```dart class CTRScissors extends BodyComponent with ContactCallbacks { bool valid = true; CTRScissors() { renderBody = false; } updatePosition(Vector2 newPos) { body.setTransform(newPos, 0); } @override Body createBody() { const bodySize = 20.0; final bodyDef = BodyDef( type: BodyType.dynamic, gravityOverride: Vector2(0, 0), userData: this, bullet: true, position: Vector2(0, 0)); return world.createBody(bodyDef) ..createFixtureFromShape(CircleShape()..radius = bodySize * 0.5, density: 1, friction: 0.2, restitution: 0.5); } @override void beginContact(Object other, Contact contact) { super.beginContact(other, contact); if (other is CTRRopeSegment) { if (valid && !other.isBreak) { other.removeFromParent(); other.isBreak = true; } } } } ``` `other.removeFromParent();`会直接让绳子变成2段，`other.isBreak = true;`则是用于防止多次移除和解决切断后渲染问题 ### 切完之后如何渲染只需要做一些小改动，首先如果`CTRRopeSegment`的`isBreak`为`true`，添加一个`-1,-1`点到`points`中 ```dart for (int i = 0; i < _ropSegs.length; i++) { final currenPt = _ropSegs[i].position; if (_ropSegs[i].isBreak) { points.add(const Offset(-1, -1)); } else { points.add(Offset(currenPt.x, currenPt.y)); } } ``` 接着绘制时发现当前点或者接下来一个点坐标都小于0，直接不绘制 ```dart for (int i = 0; i < newPoints.length - 1; i++) { if (i % 4 == 0) { togglePaint = !togglePaint; } final paint = togglePaint ? paint1 : paint2; if ((newPoints[i + 1].dx < 0 && newPoints[i + 1].dy < 0) || (newPoints[i].dx < 0 && newPoints[i].dy < 0)) { continue; } canvas.drawLine(Offset(newPoints[i].dx, newPoints[i].dy), Offset(newPoints[i + 1].dx, newPoints[i + 1].dy), paint); } ``` ![ctr_rope_cut.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2195356969c44a59d6d8c11098b699d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=470&h=412&s=202432&e=gif&f=27&b=e5af67) ## 将糖果挂到绳子上糖果想要挂载到绳子上，首先自己需要继承`BodyComponent`，然后将自身传递给`CTRRope`，`CTRRope`增加`attachComponent`用于接收挂载物 ```dart final Offset startPosition; final BodyComponent? attachComponent; final double length; final List _ropSegs = []; CTRRope( {this.startPosition = const Offset(0, 0), this.length = 100, this.attachComponent}); ``` `CTRRope`发现挂载物不为空时，创建`RopeJoint`将绳子最后一段和挂载物连接起来 ```dart if (attachComponent != null) { final jointDef = RopeJointDef() ..bodyA = lastRopeSeg?.body ?? pin.body ..bodyB = attachComponent!.body ..maxLength = ropeSegLen; game.world.createJoint(RopeJoint(jointDef)); } ``` ![ctr_rope_with_candy.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3ea634b1b2246e9abfd28008a0cec1d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=490&h=492&s=607536&e=gif&f=46&b=e4ad65) # 采集星星糖果和星星的碰撞检测，我使用了flame的`CollisionCallbacks`，但是我发现无法直接给继承自`BodyComponent`的`CTRCandy`开启`CollisionCallbacks`，只能新建一个专门用于碰撞检测的组件 ```dart class CTRCandyCollisionComponent extends PositionComponent with CollisionCallbacks { final WeakReference? candy; CTRCandyCollisionComponent({this.candy}); @override FutureOr onLoad() { size = Vector2(40, 40); add(CircleHitbox(radius: 30) ..anchor = Anchor.center ..position = Vector2(0, 0)); return super.onLoad(); } @override void onCollisionStart( Set intersectionPoints, PositionComponent other) { super.onCollisionStart(intersectionPoints, other); if (other is CTRStar) { other.disappear(); } } } ``` 但是这个组件如果直接`add`到`CTRCandy`上，`CollisionCallbacks`依然无法生效，经过尝试，我将它挂载到了根节点上，并通过`update`同步`CTRCandy`和`CTRCandyCollisionComponent`的位置 ```dart class CTRCandy extends BodyComponent { ... @override Future onLoad() async { ... collisionComponent = CTRCandyCollisionComponent(candy: WeakReference(this)); parent?.add(collisionComponent); ... } @override void update(double dt) { super.update(dt); collisionComponent.position = body.position; } } ``` `CTRStar`继承自`PositionComponent`，所以直接加一个`CircleHitbox`即可 ```dart add(CircleHitbox(radius: 10) ..anchor = Anchor.center ..position = size * 0.5); ``` 碰撞时，调用`CTRStar`的`disappear()`触发消失动画，`CTRStar`通过对`animationTickers`的监控，在动画结束时销毁自己 ```dart disappear() { _animationComponent.current = CTRStarState.disappear; _animationComponent.animationTickers?[CTRStarState.disappear]?.onComplete = () { removeFromParent(); }; } ``` ![ctr_star_disappear.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbb19dbb100344e1a92b128b55ad9880~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=490&h=492&s=635451&e=gif&f=29&b=e6b16c) # 怪兽吃到糖果怪兽和糖果之间也是采用的`CollisionCallbacks`进行检测 ```dart @override void onCollisionStart( Set intersectionPoints, PositionComponent other) { super.onCollisionStart(intersectionPoints, other); if (other is CTRCandyCollisionComponent) { other.candy?.target?.beEaten(); eat(); } } ``` 发现怪兽碰撞到了糖果，调用糖果的`beEaten`触发fadeOut效果，通过`OpacityEffect`实现 ```dart beEaten() { _candyBgComponent.add(OpacityEffect.fadeOut(EffectController(duration: 0.3)) ..removeOnFinish = false); _candyFgComponent.add(OpacityEffect.fadeOut(EffectController(duration: 0.3)) ..removeOnFinish = false); } ``` `eat();`则是触发了小怪兽的干饭动画 ```dart eat() { _animationComponent.animationTickers?[CTRPlayerAnimState.eat]?.reset(); _animationComponent.current = CTRPlayerAnimState.eat; } ``` ![ctr_player_eat.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab5ca2ecde774608ab6a30070d57276a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=398&h=332&s=310980&e=gif&f=28&b=d09255) # 合在一起，布置一个关卡首先添加小怪兽 ```dart _player = CTRPlayer(images: images) ..anchor = Anchor.center ..position = Vector2(size.x * 0.8, size.y * 0.8); add(_player); ``` 然后布置小星星 ```dart add(CTRStar(images: images) ..anchor = Anchor.center ..position = Vector2(100, 400)); add(CTRStar(images: images) ..anchor = Anchor.center ..position = Vector2(220, 430)); add(CTRStar(images: images) ..anchor = Anchor.center ..position = Vector2(320, 530)); ``` 接下来创建糖果但是不添加 ```dart final candy = CTRCandy(images: images, pos: Offset(100, 200)); ``` 最后布置绳子并添加糖果 ```dart { final hook = CTRHook(images: images) ..anchor = Anchor.center ..position = Vector2(100, 100); final rope = CTRRope( startPosition: hook.position.toOffset(), attachComponent: candy, length: 200); add(rope); add(hook); } { final hook = CTRHook(images: images) ..anchor = Anchor.center ..position = Vector2(250, 100); final rope = CTRRope( startPosition: hook.position.toOffset(), attachComponent: candy, length: 300); add(rope); add(hook); } add(candy); ``` 就可以得到开头的游戏场景啦\~ # 接下来... 简单总结一下，这个小游戏主要涉及以下技术点 * `SpriteAnimationComponent`和`SpriteAnimationGroupComponent`的使用 * `flame_forge2d`的基础用法和`RopeJoint`的使用 * `flame`碰撞检测的使用访问可以获取完整代码，更多细节阅读代码就可以知道了哦\~