鲁达 作者 | fundroid 责编 | 欧阳姝黎
本项目基于 Jetpack Compose 1.0.0-beta04 实现
Jetpack Compose 为 Android 提供了新的声明式UI开发方式，本文介绍如何基于 Compose 打造一个经典的俄罗斯方块游戏。
Part1 MVI 架构
游戏程序的执行流程就是一个不断等待输入、渲染界面的过程，这非常适合基于MVI架构进行开发。
MVI 即 Model-View-Intent，它受前端框架的启发，提倡一种单向数据流的设计思想，可以配合 Compose 实现其逻辑部分。
本项目的 MVI 的结构如下：
View层：基于 Compose 打造，所有 UI 由代码实现
Model层：ViewModel 维护 State 的变化，游戏逻辑交由 reduce 处
V-M通信：通过 StateFlow 驱动Compose刷新，事件由 Action 分发至 ViewModel
首先看一下View层的组成，游戏界面由以下几部分构成：
GameBody：绘制按键、处理用户输入
BrickMatrix：绘制方块矩阵背景、下落中的方块
Scoreboard：显示游戏得分、时钟等信息
Part2 方块绘制（BrickMatrix）
方块区域由12 * 24 的小方块组成的矩阵构成，砖块基于 Compose 的 Canvas 绘制。
drawBrick：
Canvas 需要使用 DrawScope，为了便于使用，我们定义 drawBrick 为 DrawScope的扩展函数
private fun DrawSco(
brickSize: Float,//每一个方块的size
offset: Offset,//在矩阵中的偏移位置
color: Color//砖块颜色
) {
//根据Offset计算实际位置
val actualLocation = Offset(
o * brickSize,
o * brickSize
)
val outerSize = brickSize * 0.8f
val outerOffset = (brickSize - outerSize) / 2
//绘制外部矩形边框
drawRect(
color,
topLeft = actualLocation + Offset(outerOffset, outerOffset),
size = Size(outerSize, outerSize),
style = Stroke(outerSize / 10)
)
val innerSize = brickSize * 0.5f
val innerOffset = (brickSize - innerSize) / 2
//绘制内部矩形方块
drawRect(
color,
actualLocation + Offset(innerOffset, innerOffset),
size = Size(innerSize, innerSize)
)
}
drawMatrix：
搞定砖块单元，接着绘制矩阵如下
matrix
private fun DrawSco(
brickSize: Float,
matrix: Pair<Int, Int> //横向、纵向的数量：12 * 24
) {
(0 until ma).forEach { x ->
(0 until ma).forEach { y ->
//遍历调用drawBrick
drawBrick(
brickSize,
Offse, y.toFloat),
BrickMatrix
)
}
}
}
Part3 绘制下落的砖块
通过将砖块单元摆放在不同位置，组成不同的形状（Shape）
用相对 top-left 的 Offset值代表方块的摆放位置，每种 Shape 无非就是一组 Offset 的列表。
Shape：
定义所有 Shape 如下：
val SpiritType = listOf(
listOf(Offset(1, -1), Offset(1, 0), Offset(0, 0), Offset(0, 1)),//Z
listOf(Offset(0, -1), Offset(0, 0), Offset(1, 0), Offset(1, 1)),//S
listOf(Offset(0, -1), Offset(0, 0), Offset(0, 1), Offset(0, 2)),//I
listOf(Offset(0, 1), Offset(0, 0), Offset(0, -1), Offset(1, 0)),//T
listOf(Offset(1, 0), Offset(0, 0), Offset(1, -1), Offset(0, -1)),//O
listOf(Offset(0, -1), Offset(1, -1), Offset(1, 0), Offset(1, 1)),//L
listOf(Offset(1, -1), Offset(0, -1), Offset(0, 0), Offset(0, 1))//J
)
Spirit：
定义 Spirit 代表下落砖块，通过 Shape 和 Offset 决定 Spirit 在 Matrix 中的具体位置。
data class Spirit(
val shape: List<Offset> = emptyList,
val offset: Offset = Offset(0, 0),
) {
val location: List<Offset> = { it + offset }
}
drawSpirit
最后调用 drawBrick，绘制下落砖块
fun DrawSco(spirit: Spirit, brickSize: Float, matrix: Pair<Int, Int>) {
clipRect(
0f, 0f,
ma * brickSize,
ma * brickSize
) {
{
drawBrick(
brickSize,
Offse, it.y),
BrickSpirit
)
}
}
}
Part4 游戏机身（GameBody）
GameBody 的核心是按钮的绘制以及事件处理。
button 的绘制很简单, 通过 RoundedCornerShape 实现圆形、再借助 Modifier 添加阴影，增加拟物感
GameButton：
@Composable
funGameButton(
modifier: Modifier = Modifier,
size: Dp,
content: @Composable (Modifier) -> Unit
) {
val backgroundShape = RoundedCornerShape(size / 2)
Box(
modifier = modifier
.shadow, shape = backgroundShape)
.size(size = size)
.clip(backgroundShape)
.background(
brush = Bru(
colors = listOf(
Purple200,
Purple500
),
startY = 0f,
endY = 80f
)
)
) {
conten))
}
}
组装Button、发送Action
在 GameBody 中对 Button 进行布局、在 OnClick 中向 ViewModel 发送 Action。
四个方向键的布局如下：
Box(
modifier = Modifier
.fillMaxHeight
.weight(1f)
) {
GameButton(
Modi),
onClick = { clickable.onMove) },
size = DirectionButtonSize
) {
ButtonText(it, stringResource(id = R.))
}
GameButton(
ModiStart),
onClick = { clickable.onMove) },
size = DirectionButtonSize
) {
ButtonText(it, stringResource(id = R.))
}
GameButton(
ModiEnd),
onClick = { clickable.onMove) },
size = DirectionButtonSize
) {
ButtonText(it, stringResource(id = R.))
}
GameButton(
Modi),
onClick = { clickable.onMove) },
size = DirectionButtonSize
) {
ButtonText(it, stringResource(id = R.))
}
}
Clicable：分发事件
clickable 负责事件分发：
data class Clickable constructor(
val onMove: (Direction) -> Unit,//移动
val onRotate: -> Unit,//旋转
val onRestart: -> Unit,//开始、重置游戏
val onPause: -> Unit,//暂停、恢复游戏
val onMute: -> Unit//打开、关闭游戏音乐
)
Part5 订阅游戏状态（ViewState）
GameScreen 订阅 viewModel 的数据实现UI的刷新。ViewState 是唯一的数据源，遵循 SSOT(Single Source Of Truth) 原则。
Compose 中使用 ViewModel 需要添加 viewmodel-compose 的支持
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha03"`
@Composable
funGameScreen(modifier: Modifier = Modifier) {
val viewModel = viewModel<GameViewModel> //获取ViewModel
val viewState by viewModel.viewS //订阅State
Box {
Canvas(
modifier = Modi
) {
val brickSize = min(
/ viewState.ma,
/ viewState.ma
)
//仅负责绘制UI，没有任何逻辑处理
drawMatrix(brickSize, viewS)
drawBrick, brickSize, viewS)
drawSpiri, brickSize, viewS)
}
//略...
}
}
借助 MVI 的加持，Compose 无需染指任何逻辑，逻辑全部交由 ViewModel处理。
接下来，看一下ViewModel的核心实现，ViewState & Action
Part6 ViewState
遵循 SSOT 原则，所有影响 UI 刷新的数据都应该定义在 ViewState 中
data class ViewState(
val bricks: List<Brick> = emptyList, //底部落地成盒的砖块
val spirit: Spirit = Empty, // 下落中的砖块
val spiritReserve: List<Spirit> = emptyList, //后补t砖块（Next）
val matrix: Pair<Int, Int> = MatrixWidth to MatrixHeight,//矩阵尺寸
val gameStatus: GameStatus = GameS游戏状态
val score: Int = 0, //得分
val line: Int = 0, //下了多少行
val level: Int = 0,//当前级别（难度）
val isMute: Boolean = false,//是否静音
)
enum class GameStatus {
Onboard, //游戏欢迎页
Running, //游戏进行中
LineClearing,// 消行动画中
Paused,//游戏暂停
ScreenClearing, //清屏动画中
GameOver//游戏结束
}
如上，甚至连消行、清屏这类逻辑也统一由 ViewModel 负责
Part7 Action
用户的输入通过 Action 通知到 ViewModel ，目前支持以下几种 Action：
sealed class Action {
data classMove(val direction: Direction) : Action //点击方向键
object Reset : Action //点击start
object Pause : Action //点击pause
object Resume : Action //点击resume
object Rotate : Action //点击rotate
object Drop : Action //点击↑，直接掉落
object GameTick : Action //砖块下落通知
object Mute : Action//点击mute
}
Part8 reduce
ViewModel 接收到 Action 后，分发到 reduce、更新 ViewState。
GameTicker：砖块下落Action
以最核心的 GameTicker 为例，它保证了砖块按一定速度下降。其他所有 Action 都是用户触发的，唯有 GameTicker 是自动触发，
GameTicker逻辑
基本流程如上图，根据 Spirit 在当前 Matrix 中的状态更新 ViewStae:
fun reduce(state: ViewState, action: Action) {
when(action) {
Ac -> run {
// 没有触达底部，y轴偏移+1
val spirit = .toOffset)
if , s)) {
emi(spirit = spirit))
}
// GameOver
if (!, s)) {
//砖块超出屏幕上界，游戏结束
}
// 更新底部Bricks，
// updateBricks: 底部Bricks的状态信息
// clearedLine：消行信息
val (updatedBricks, clearedLines) = updateBricks(
,
,
matrix = s
)
//updatedBricks返回的底部Bricks的信息由三个List<Brick>组成
val (noClear, clearing, cleared) = updatedBricks
if (clearedLines != 0) {
// 成功消行
// 执行消行动画，见后文
} else {
//没有消行
emi(
bricks = noClear，
spirit = Next))
}
}//end of run
}
}
isValidInMatrix 判断 Spirit 相对于 Matrix 是否已经出界，出界以为游戏结束。当 Spirit 触达底部时，updatedBricks 负责更新底部 Bricks 数据，即将 Spirit 的 bricks 合并到底部 Bricks 中。
消行动画：
Brick 的定义很简单，就是在 Matrix 中的 Offset
data class Brick(val location: Offset = Offset(0, 0))
updatedBricks 返回三个List<Brick>，分别记录消行动画过程中 Bricks 的中间状态
| noClear：未消行的bricks | clearing：消行中的bricks，相当于Invisiable | cleared：消行后的bricks，相当于Gone |
|---|---|---|
基于返回的 List<Brick> ，更新 state 实现消行动画
launch {
//animate the clearing lines
repeat(5) {
emit(
//间隔100ms，交替显示noClear/clearing
(
gameStatus = GameS,
spirit = Empty,
bricks = if (it % 2 == 0) noClear else clearing
)
delay(100)
}
//delay emit new state
emit(
//动画结束，bricks更新到cleared
(
spirit = Next,
bricks = cleared,
gameStatus = GameS
)
)
}
Part9 最后
篇幅有限，本文只能以小见大地介绍一个基本实现过程，更多细节欢迎查阅源码了解。
整个游戏，包括动画在内的所有的UI刷新全是由 State 驱动完成的，运行十分流畅，这证明 Compose 在性能上已经完全不输传统UI开发，未来随着功能上的不断完善，Compose 的时代或许真的要来了，自 Android 诞生就存在的 android.view.View 体系也将迎来它的最终谢幕。。
~game over~