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

最新推荐文章于 2024-05-30 09:32:50 发布

史迪哇

最新推荐文章于 2024-05-30 09:32:50 发布

阅读量373

点赞数 4

分类专栏：程序员文章标签： windows

本文链接：https://blog.csdn.net/m0_74931244/article/details/137463965

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

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)

}

//略…

}

瞧! 有了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<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负责，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是自动触发，用来保证砖块按一定速度下降。

基本流程如上图所示，根据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)) {
//砖块超出屏幕上界，游戏结束
}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

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

3/13/H4lCoPEF.jpg" />

最后

往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

[外链图片转存中…(img-j3G6Ef3f-1712472515043)]

[外链图片转存中…(img-Xbmm8TtS-1712472515043)]

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

史迪哇

关注

4
点赞
踩
4

收藏

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

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。
复制链接

扫一扫