作者 | fundroid 责编 | 欧阳姝黎
本项目基于 Jetpack Compose 1.0.0-beta04 实现
Jetpack Compose 为 Android 提供了新的声明式UI开发方式,本文介绍如何基于 Compose 打造一个经典的俄罗斯方块游戏。
游戏程序的执行流程就是一个不断等待输入、渲染界面的过程,这非常适合基于MVI架构进行开发。
MVI 即 Model-View-Intent,它受前端框架的启发,提倡一种单向数据流的设计思想,可以配合 Compose 实现其逻辑部分。
本项目的 MVI 的结构如下:
View层:基于 Compose 打造,所有 UI 由代码实现
Model层:ViewModel 维护 State 的变化,游戏逻辑交由 reduce 处
V-M通信:通过 StateFlow 驱动Compose刷新,事件由 Action 分发至 ViewModel
首先看一下View层的组成,游戏界面由以下几部分构成:
GameBody:绘制按键、处理用户输入
BrickMatrix:绘制方块矩阵背景、下落中的方块
Scoreboard:显示游戏得分、时钟等信息
方块区域由12 * 24 的小方块组成的矩阵构成,砖块基于 Compose 的 Canvas 绘制。
Canvas 需要使用 DrawScope,为了便于使用,我们定义 drawBrick 为 DrawScope的扩展函数
private fun DrawScope.drawBrick(brickSize: Float,//每一个方块的sizeoffset: Offset,//在矩阵中的偏移位置color: Color//砖块颜色) {//根据Offset计算实际位置val actualLocation = Offset(offset.x * brickSize,offset.y * brickSize)val outerSize = brickSize * 0.8fval outerOffset = (brickSize - outerSize) / 2//绘制外部矩形边框drawRect(color,topLeft = actualLocation + Offset(outerOffset, outerOffset),size = Size(outerSize, outerSize),style = Stroke(outerSize / 10))val innerSize = brickSize * 0.5fval innerOffset = (brickSize - innerSize) / 2//绘制内部矩形方块drawRect(color,actualLocation + Offset(innerOffset, innerOffset),size = Size(innerSize, innerSize))}drawMatrix:搞定砖块单元,接着绘制矩阵如下
matrix
private fun DrawScope.drawMatrix(brickSize: Float,matrix: Pair<Int, Int> //横向、纵向的数量:12 * 24) {(0 until matrix.first).forEach { x ->(0 until matrix.second).forEach { y ->//遍历调用drawBrickdrawBrick(brickSize,Offset(x.toFloat, y.toFloat),BrickMatrix)}}}
Part3 绘制下落的砖块
通过将砖块单元摆放在不同位置,组成不同的形状(Shape)
shape
用相对 top-left 的 Offset值代表方块的摆放位置,每种 Shape 无非就是一组 Offset 的列表。
Shape:定义所有 Shape 如下:
val SpiritType = listOf(listOf(Offset(1, -1), Offset(1, 0), Offset(0, 0), Offset(0, 1)),//ZlistOf(Offset(0, -1), Offset(0, 0), Offset(1, 0), Offset(1, 1)),//SlistOf(Offset(0, -1), Offset(0, 0), Offset(0, 1), Offset(0, 2)),//IlistOf(Offset(0, 1), Offset(0, 0), Offset(0, -1), Offset(1, 0)),//TlistOf(Offset(1, 0), Offset(0, 0), Offset(1, -1), Offset(0, -1)),//OlistOf(Offset(0, -1), Offset(1, -1), Offset(1, 0), Offset(1, 1)),//LlistOf(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> = shape.map { it + offset }}drawSpirit最后调用 drawBrick,绘制下落砖块
fun DrawScope.drawSpirit(spirit: Spirit, brickSize: Float, matrix: Pair<Int, Int>) {clipRect(0f, 0f,matrix.first * brickSize,matrix.second * brickSize) {spirit.location.forEach {drawBrick(brickSize,Offset(it.x, it.y),BrickSpirit)}}}
Part4 游戏机身(GameBody)
GameBody 的核心是按钮的绘制以及事件处理。
button 的绘制很简单, 通过 RoundedCornerShape 实现圆形、再借助 Modifier 添加阴影,增加拟物感
GameButton:@ComposablefunGameButton(modifier: Modifier = Modifier,size: Dp,content: @Composable (Modifier) -> Unit) {val backgroundShape = RoundedCornerShape(size / 2)Box(modifier = modifier.shadow(5.dp, shape = backgroundShape).size(size = size).clip(backgroundShape).background(brush = Brush.verticalGradient(colors = listOf(Purple200,Purple500),startY = 0f,endY = 80f))) {content(Modifier.align(Alignment.Center))}}组装Button、发送Action在 GameBody 中对 Button 进行布局、在 OnClick 中向 ViewModel 发送 Action。
四个方向键的布局如下:
Box(modifier = Modifier.fillMaxHeight.weight(1f)) {GameButton(Modifier.align(Alignment.TopCenter),onClick = { clickable.onMove(Direction.Up) },size = DirectionButtonSize) {ButtonText(it, stringResource(id = R.string.button_up))}GameButton(Modifier.align(Alignment.CenterStart),onClick = { clickable.onMove(Direction.Left) },size = DirectionButtonSize) {ButtonText(it, stringResource(id = R.string.button_left))}GameButton(Modifier.align(Alignment.CenterEnd),onClick = { clickable.onMove(Direction.Right) },size = DirectionButtonSize) {ButtonText(it, stringResource(id = R.string.button_right))}GameButton(Modifier.align(Alignment.BottomCenter),onClick = { clickable.onMove(Direction.Down) },size = DirectionButtonSize) {ButtonText(it, stringResource(id = R.string.button_down))}}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"`
@ComposablefunGameScreen(modifier: Modifier = Modifier) {val viewModel = viewModel<GameViewModel> //获取ViewModelval viewState by viewModel.viewState.collectAsState //订阅StateBox {Canvas(modifier = Modifier.fillMaxSize) {val brickSize = min(size.width / viewState.matrix.first,size.height / viewState.matrix.second)//仅负责绘制UI,没有任何逻辑处理drawMatrix(brickSize, viewState.matrix)drawBricks(viewState.bricks, brickSize, viewState.matrix)drawSpirit(viewState.spirit, brickSize, viewState.matrix)}//略...}}借助 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 = GameStatus.Onboard,//游戏状态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 负责
用户的输入通过 Action 通知到 ViewModel ,目前支持以下几种 Action:
sealed class Action {data classMove(val direction: Direction) : Action //点击方向键object Reset : Action //点击startobject Pause : Action //点击pauseobject Resume : Action //点击resumeobject Rotate : Action //点击rotateobject Drop : Action //点击↑,直接掉落object GameTick : Action //砖块下落通知object Mute : Action//点击mute}
ViewModel 接收到 Action 后,分发到 reduce、更新 ViewState。
GameTicker:砖块下落Action以最核心的 GameTicker 为例,它保证了砖块按一定速度下降。其他所有 Action 都是用户触发的,唯有 GameTicker 是自动触发,
GameTicker逻辑
基本流程如上图,根据 Spirit 在当前 Matrix 中的状态更新 ViewStae:
fun reduce(state: ViewState, action: Action) {when(action) {Action.GameTick -> run {// 没有触达底部,y轴偏移+1val spirit = state.spirit.moveBy(Direction.Down.toOffset)if (spirit.isValidInMatrix(state.bricks, state.matrix)) {emit(state.copy(spirit = spirit))}// GameOverif (!state.spirit.isValidInMatrix(state.bricks, state.matrix)) {//砖块超出屏幕上界,游戏结束}// 更新底部Bricks,// updateBricks: 底部Bricks的状态信息// clearedLine:消行信息val (updatedBricks, clearedLines) = updateBricks(state.bricks,state.spirit,matrix = state.matrix)//updatedBricks返回的底部Bricks的信息由三个List<Brick>组成val (noClear, clearing, cleared) = updatedBricksif (clearedLines != 0) {// 成功消行// 执行消行动画,见后文} else {//没有消行emit(newState.copy(bricks = noClear,spirit = state.spiritNext))}}//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:未消行的bricksclearing:消行中的bricks,相当于Invisiablecleared:消行后的bricks,相当于Gone
基于返回的 List<Brick> ,更新 state 实现消行动画
launch {//animate the clearing linesrepeat(5) {emit(//间隔100ms,交替显示noClear/clearingstate.copy(gameStatus = GameStatus.LineClearing,spirit = Empty,bricks = if (it % 2 == 0) noClear else clearing)delay(100)}//delay emit new stateemit(//动画结束,bricks更新到clearedstate.copy(spirit = state.spiritNext,bricks = cleared,gameStatus = GameStatus.Running))}
篇幅有限,本文只能以小见大地介绍一个基本实现过程,更多细节欢迎查阅源码了解。
https://github.com/vitaviva/compose-tetris
整个游戏,包括动画在内的所有的UI刷新全是由 State 驱动完成的,运行十分流畅,这证明 Compose 在性能上已经完全不输传统UI开发,未来随着功能上的不断完善,Compose 的时代或许真的要来了,自 Android 诞生就存在的 android.view.View 体系也将迎来它的最终谢幕。。
~game over~
网易24工作室《永劫无间》手游线下首测试玩
2024-01-15SE《最终幻想14》玩家数破3000万,《黄金的遗产》游戏细节公布
2024-01-15三国杀:强度全靠机制,输出全看队友,这些武将你会玩吗
2024-01-15刺客横行,ADC生存之难!LOL新版本带来恐怖游戏般的挑战
2024-01-15《战舰世界》13.0版本如期而至,可玩性超高的M系航母二线来了!
2024-01-15曹冲引发十年前退坑潮,三国杀迎来首次危机!
2024-01-15这条分支不一般!《战舰世界》新版本开启M系新航母的先行体验
2024-01-15炉石传说:双职业卡术士专门提供副作用,弃牌自伤毁水晶一应俱全
2024-01-15炉石传说新卡慢递:倒霉蛋法师德鲁伊提供超模,术士提供副作用
2024-01-155年心血全白费?网易掀桌子了,要让逆水寒所有玩家重回起点
2024-01-15