请先关注 [低调大师] 公众号 优秀的自媒体个人博客,低调大师,许军

低调大师

您现在的位置是:首页>文章详情

文章详情

打造一个Compose版的俄罗斯方块

2021-05-20 75热度

本文介绍如何使用Jetpack Compose打造一个经典版的俄罗斯方块游戏。

废话不多说,先看东西:

screenshot.gif

1. 为什么Compose适合做游戏?

通常一个游戏程序的执行流程如下所示:

image.png

简单说就是一个不断等待输入、渲染界面的过程。

这种模型非常符合当下前端的开发思想:数据驱动UI。 因此基于各种前端框架的小游戏层出不穷。相比之下,用客户端开发同类应用成本则会高出不少。

如今有了Compose,客户端终于在开发范式上追上了前端的步伐,像前端那样开发小游戏成为可能。


2. 基于MVI的游戏架构

MVIModel-View-Intent,它受前端框架的启发,提倡一种单向数据流的设计思想,非常适合在Compose项目中实现逻辑部分,可以彻底贯彻数据驱动UI的核心思想。

之前的文章里曾对MVI架构做过简单介绍,后续也计划对MVI与MVVM等其他架构做一个对比介绍。本文只聚焦MVI在俄罗斯方块游戏中的具体使用。

项目结构如下:

image.png

  • View层:基于Compose打造,所有UI元素都由代码实现
  • Model层ViewModel维护State的变化,游戏逻辑交由reduce处理
  • V-M通信:通过StateFlow驱动Compose刷新,用户事件由Action分发至ViewModel

ViewModel的核心代码如下:

class GameViewModel : ViewModel() {         private val _viewState: MutableStateFlow= MutableStateFlow(ViewState())         //Provide State to observed by UI layer     val viewState = _viewState.asStateFlow()    //dispatch Action from UI layer     fun dispatch(action: Action) {         viewModelScope.launch {            _viewState.value = reduce(viewState.value, action)         }     }    //update viewState according to the Action     private fun reduce(state: ViewState, action: Action): ViewState =        when(action) { //handle                      Action.Reset -> {                  //略...                 state.copy(...)             }                          Action.Move -> {                //略...                 state.copy(...)             }                         //略...         } }

接下来我们看一下View层和Model层的具体实现。


3. View Layer:基于Compose实现

作为一个单页面的游戏没有页面跳转,界面由以下几部分构成:

image.png

  • GameBody:绘制按键、处理用户输入
  • GameScreen
    • BrickMatrix:绘制方块矩阵背景、下落中的方块
    • Scoreboard:显示游戏得分、时钟等信息

接下来重点介绍一下方块区域(BrickMatrix)以及游戏机身(GameBody)的绘制

3.1 方块绘制(BrickMatrix)

方块区域由12 * 24 的小方块组成的矩阵构成。为了模拟液晶屏的显示效果,需要分别绘制浅色的矩阵以及深色的砖块(下落中的以及底部的),所有元素均基于Compose的Canvas绘制。

关于Canvas的基本使用,我之前的文章中有介绍:juejin.cn/post/694488…

绘制背景矩阵

首先绘制每个砖块单元的图形,形状为正方形:

image.png

drawBrick:

Canvas中绘制图形需要借助DrawScope,为了便于使用,我们定义drawBrickDrawScope的扩展函数

private fun DrawScope.drawBrick(     brickSize: Float,//每一个方块的size     offset: Offset,//在矩阵中的偏移位置     color: Color//砖块颜色) {    //根据Offset计算实际位置     val actualLocation = Offset(         offset.x * brickSize,         offset.y * 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:

搞定砖块单元,绘制矩阵如下

image.png

private fun DrawScope.drawMatrix(     brickSize: Float,     matrix: Pair //横向、纵向的数量: 12 * 24) {     (0 until matrix.first).forEach { x ->         (0 until matrix.second).forEach { y ->            //遍历调用drawBrick             drawBrick(                 brickSize,                 Offset(x.toFloat(), y.toFloat()),                 BrickMatrix             )         }     } }

绘制下落的砖块

一个个砖块单元根据摆放位置的不同,组成不同形状(Shape)的下落砖块。

image.png

用相对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:

由Shape和Offset便可以决定下落砖块在Matrix中的具体位置。定义Spirit代表下落砖块:

data class Spirit(    val shape: List= emptyList(),    val offset: Offset = Offset(0, 0), ) {    val location: List= shape.map { it + offset } }

drawSpirit

最后调用drawBrick,绘制下落砖块

fun DrawScope.drawSpirit(spirit: Spirit, brickSize: Float, matrix: Pair) {     clipRect(        0f, 0f,         matrix.first * brickSize,         matrix.second * brickSize     ) {         spirit.location.forEach {             drawBrick(                 brickSize,                 Offset(it.x, it.y),                 BrickSpirit             )         }     } }

3.2 游戏机身(GameBody)

GameBody的核心是按钮的绘制以及事件处理

绘制Button

button的绘制很简单, 通过RoundedCornerShape实现圆形、通过Modifier添加阴影增加立体感

GameButton:

@Composablefun GameButton(     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))     } }

添加事件

当按下方向键不放时希望方块能持续移动。Modifier.clickable()只能设置单击事件,不满足使用需求,需要让button能处理连发事件。

Modifier.pointerIneropFilter:拦截MotionEvent:

通常需要通过处理MotionEvent实现类似需求,Compose中提供了处理MotionEvent的方法:

Modifier.pointerIneropFilter { //it:MotionEvent //可以获取当前MotionEvent     when(it.action) {         ACTION_DOWN -> {             ...         }                  ...     } }

Modifier.indication:设置click背景色

拦截MotionEvent后,默认的button按下时背景色变化的逻辑失效。此时可以借助Modifier.indication进行弥补,indication允许我们根据当前按钮的交互状态改变显示状态:

Modifier     .indication(         interactionSource = interactionSource, //观察交互状态         indication = rememberRipple() //设置Ripple风格的显示效果     )     .pointerInteropFilter {        when(it.action) {             ACTION_DOWN -> {                 val interaction = PressInteraction.Press(Offset(50f, 50f))                  interactionSource.emit(interaction) //通知交互状态的改变、改变显示状态             }                  ...     } }

ReceiveChannel发送连发事件:

添加了Modifier.pointerIneropFilter和Modifier.indication的完整代码如下:

@Composablefun GameButton(     modifier: Modifier = Modifier,     size: Dp,     onClick: () -> Unit = {},     content: @Composable (Modifier) -> Unit) {    val backgroundShape = RoundedCornerShape(size / 2)    lateinit var ticker: ReceiveChannel //定时器     val coroutineScope = rememberCoroutineScope()    val pressedInteraction = remember { mutableStateOf(null) }    val interactionSource = MutableInteractionSource()     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                 )             )             .indication(interactionSource = interactionSource, indication = rememberRipple())             .pointerInteropFilter {                when (it.action) {                     ACTION_DOWN -> {                         coroutineScope.launch {                            // Remove any old interactions if we didn't fire stop / cancel properly                             pressedInteraction.value?.let { oldValue ->                                val interaction = PressInteraction.Cancel(oldValue)                                 interactionSource.emit(interaction)                                 pressedInteraction.value = null                             }                            val interaction = PressInteraction.Press(Offset(50f, 50f))                             interactionSource.emit(interaction)                             pressedInteraction.value = interaction                         }                         ticker = ticker(initialDelayMillis = 300, delayMillis = 60)                         coroutineScope.launch {                            //ticker发送连发事件                             ticker                                 .receiveAsFlow()                                 .collect { onClick() }                         }                     }                    //略...                 }                true             }     ) {         content(Modifier.align(Alignment.Center))     } }

使用ticker()创建连发事件源的ReceiveChannel

组装Button、发送Action

最后在GameBody中对各Button进行布局,并在OnClick中向ViewModel发送Action。

例如,四个方向键的布局:

image.png

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//打开、关闭游戏音乐)

3.3 订阅游戏状态(ViewState)

GameScreen订阅viewModel的数据实现UI的刷新。ViewState是唯一的数据源,遵循Single Source Of Truth的要求。

Compose中使用ViewModel

添加viewmodel-compose的支持,方便在Composable中访问ViewModle

implementation "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha03"复制代码
@Composablefun GameScreen(modifier: Modifier = Modifier) {    val viewModel = viewModel() //获取ViewModel     val viewState by viewModel.viewState.collectAsState() //订阅State     Box() {         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无需再染指任何逻辑,仅负责drawXXX即可,逻辑全部交由ViewModel处理。

接下来,我们移步ViewModel的实现。


4. Model Layer :基于ViewModel实现

MVI中的Model层一般负责数据请求以及State的更新。俄罗斯方块中没有数据请求场景,只处理本地state更新即可。

4.1 ViewState

遵循SSOT原则,所有影响UI刷新的数据都定义在ViewState

data class ViewState(        val bricks: List= emptyList(), //底部落地成盒的砖块         val spirit: Spirit = Empty, // 下落中的砖块         val spiritReserve: List= emptyList(), //后补t砖块(Next)         val matrix: Pair = 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负责,Compose无脑反应State即可。

4.2 Action

用户的输入通过Action通知到ViewModel,目前支持以下几种Action:

sealed class Action {    data class Move(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}

4.3 reduce

ViewModel接收到Action后,分发到reduce、更新ViewState。

GameTicker:砖块下落Action

以最核心的GameTicker为例,其他所有Action都是用户触发的,唯有GameTicker是自动触发,用来保证砖块按一定速度下降。

image.png

基本流程如上图所示,根据Spirit在当前Matrix中的状态更新ViewStae:

  • 没有触达底部:
    • Spirit在y轴前进一步
  • 触达底部,但没有成功消行:
    • 更新Next Spirit
    • 更新下沉到底部的bricks(吸收Spirit的brick)
  • 成功消行:
    • 更新Next Spirit
    • 更新GameState到LineClearing
  • 屏幕溢出:
    • 更新GameState到GameOver
fun reduce(state: ViewState, action: Action) {    when(action) {              Action.GameTick -> run {             // 没有触达底部,y轴偏移+1              val spirit = state.spirit.moveBy(Direction.Down.toOffset())             if (spirit.isValidInMatrix(state.bricks, state.matrix)) {                   emit(state.copy(spirit = spirit))              }            // GameOver             if (!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组成             val (noClear, clearing, cleared) = updatedBricks                         if (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,分别记录消行动画过程中Bricks的中间状态

  • noClear: 未消行的bricks
  • clearing: 消行中的bricks(相当于消除的空行设置为Invisiable
  • cleared: 消行后的bricks(相当于消除的空行设置为Gone
noClear clearing cleared
image.png image.png image.png

消行动画:

基于返回的List,通过更新state,实现消行动画

launch {    //animate the clearing lines     repeat(5) {         emit(            //间隔100ms,交替显示noClear/clearing             state.copy(                 gameStatus = GameStatus.LineClearing,                 spirit = Empty,                 bricks = if (it % 2 == 0) noClear else clearing             )         delay(100)     }                         //delay emit new state     emit(        //动画结束,bricks更新到cleared         state.copy(             spirit = state.spiritNext,             bricks = cleared,             gameStatus = GameStatus.Running         )     ) }


5. 活用@Preview

文章最后再聊一聊@Preview

由于AndroidStudio的XML预览功能很鸡肋,很多Android开发者都习惯于通过实机运行查看UI。Compose的@Preview的预览效果可以做到与真机无异,实现所见所即得开发。因此,建议为所有有调试需要的Composable配备@Preview,将大大提高你的UI开发效率。

由于@Preview不能接受业务参数,Composable的接口定义需要秉承对Preview友好的原则,尽量为其添加可预览的默认值

借助@Preview,我们可以方便地进行局部UI的预览,并且可以组合各个@Preview的Composalbe来预览全貌。UI开发如同装配车间那样实现流水化作业:

image.png

除了基本预览以外@Preview还提供了例如互动预览、实机预览等更多使用功能。此外,通过右击还可以将预览UI直接保存为.png。 本游戏的AppIcon就是通过这种方式创建生成的。


6. 最后

篇幅有限,本文只能以小见大地介绍游戏的基本实现过程,其他更多功能的实现欢迎查阅源码了解。

整个游戏中,包括动画在内的所有的UI刷新全是由State驱动完成的,借助于Compose Compiler强大的编译期优化,即使再频繁的Recomposition(重组)也没有任何性能问题,运行起来十分流畅。

用Compose做游戏都如此流畅,更何况普通的UI?在性能层面已无需担心,未来随着功能层面的不断完善,Compose的时代或许真的要来了,自Android诞生就存在的android.view.View体系也将迎来它的谢幕。。

~ Game Over ~

game_over.gif

项目地址

github.com/vitaviva/co…


收藏 (0)

相关文章

    文章评论

    共有0条评论来说两句吧...