爷童回！Compose + MVI 打造经典版的俄罗斯方块

2401_84149802

于 2024-05-08 03:54:21 发布

阅读量591

点赞数 29

分类专栏：程序员文章标签：状态模式

本文链接：https://blog.csdn.net/2401_84149802/article/details/138553680

版权

程序员专栏收录该内容

269 篇文章 0 订阅

订阅专栏

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

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

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

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

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

2. 基于MVI的游戏架构

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

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

项目结构如下：

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实现

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

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

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

3.1 方块绘制（BrickMatrix）

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

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

绘制背景矩阵

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

drawBrick：

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

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：

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

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

绘制下落的砖块

一个个砖块单元根据摆放位置的不同，组成不同形状（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：

由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<Int, Int>) {
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：

@Composable
fun GameButton(
modifier: Modifier = Modifier,
size: Dp,
content: @Composable (Modifier) -> Unit
) {
val backgroundShape = RoundedCornerShape(size / 2)

) {
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的完整代码如下：

@Composable
fun 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<PressInteraction.Press?>(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。

例如，四个方向键的布局：

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”

@Composable
fun 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)

}

//略…

}

最后

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

上面分享的腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

【Android高级架构视频学习资源】
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
atrix)

}

//略…

}

最后

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

[外链图片转存中…(img-3z1oGlnA-1715111612559)]

【Android高级架构视频学习资源】
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

2401_84149802

关注

29
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
爷童回！Compose + MVI 打造经典版的俄罗斯方块

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。上面分享的腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。【Android思维脑图（技能树）】知识不体系？
复制链接

扫一扫