鸿蒙OpenHarmony开发实战-0开始做游戏渲染引擎

首先实现了一个通用的画廊组件来作为练手项目，它主要使用了四个基础组件和容器组件：

我们放置一个按钮来触发 showGallery 方法，该方法控制 panel 弹出式组件的显示和隐藏，这里的 div 和 button 标签就是 hml 内置的组件，跟我们平常写 html 很相似，它支持我们大部分的常规属性如 id ，class 和 type 等，方便我们用来设置组件基本标识和外观特征显示。

<div class="btn-div"><button type="capsule" value="Click Here" onclick="showGallery"></button>
</div>

然后我们 panel 组件中放置可变更的画廊内容展示窗口，并让 mode 和 src 变成可设置的变量，这样画廊组件就能根据模式让画廊组件显示不同的形态，根据传入的图片地址显示不同的图片内容，这里的语法跟微信小程序很和 Vue 框架相似，都可以使用 Mustache 语法来控制属性值。

<panelid="gallery"class="gallery"type="foldable"mode="{{modeFlag}}}"onsizechange="changeMode"
><div class="panel-div" onclick="closeGallery"><image class="panel-image" onclick="closeGallery" src="{{galleryUrl}}}"></image><buttonclass="panel-circle"onclick="closeGallery"type="circle"icon="/common/images/close.svg"></button></div>
</panel>

实现完视图和布局之后，我们就可以在同级目录下 index.js 中补充画廊组件的逻辑，由于支持 ES6 语法，我们写的也很舒服很高效，这里的 data 是画廊组件的数据模型，类型可以是对象或者函数，如果类型是函数，返回值必须是对象，注意属性名不能以 $ 或 _ 开头，不要使用保留字，我们在这里给 modeFlag 和 galleryUrl 设置默认值。

export default {data: {modeFlag: "full",galleryUrl:"https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_1440w.jpg?source=172ae18b",},
};

而显示和隐藏逻辑比较简单，只需要获取 panel 的节点，然后触发 show 或者 hide 方法即可，当然除了该方法，我们还可以使用 渲染属性 来实现：

  • for 根据设置的数据列表，展开当前元素
  • if 根据设置的 boolean 值，添加或移除当前元素
  • show 根据设置的 boolean 值，显示或隐藏当前元素
showGallery(e) {this.$element('gallery').show()
},
closeGallery(e) {if(e.target.type==='image') returnthis.$element('gallery').close()
},

我们还可以在同级目录下在 index.css 补充组件的样式，可以让我们的画廊呈现更好的效果，这里动画样式还支持动态的旋转、平移、缩放和渐变效果，均可在 style 或 css 中设置。

.panel-div {width: 100%;height: 100%;flex-direction: column;align-items: center;justify-content: center;
}

整体实现的效果如下图所示，效果简单粗暴，写完了这个 DEMO 之后，我们团队成员对 OpenHarmony 的基础组件运用有了最基本的了解：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

进阶

虽然上面我们掌握了最基础的组件使用，但我们还是没使用到 Canvas 画布组件，所以我们继续翻阅官方文档，发现 OpenHarmony 是提供了齐全的画布接口：
在这里插入图片描述

我们使用经典 FlappyBird 游戏作为我们画布组件的第一次尝试。

收集素材

首先我们先准备好游戏的图片和动画素材：

image.png

然后我们准备好画布，设置好高度和宽度，并监听画布按下的方法 ontouchend。

<div class="container"><canvas ref="canvas" style="width: 280px; height: 512px;" ontouchend="moveUp"></canvas>
</div>

数据初始化

准备好画布之后，我们就需要初始化游戏的初始数据，核心的主要涉及几个：

el画布元素
gap管道间距
score得分
bX小鸟 X 轴坐标
bY小鸟 Y 轴坐标
gravity重力指数
pipe管道数据
birdHeight小鸟高度
birdWidth小鸟宽度
pipeNorthHeight上侧管道高度
pipeNorthWidth下侧管道高度
cvsHeight画布高度
cvsWidth画布宽度
fgHeight地面高度
fgWidth地面宽度

实现这个游戏之前，我们不但需要掌握基础的组件，还需要了解一部分生命周期，OpenHarmony 有两种生命周期，分别是应用生命周期和页面生命周期，我们这里第一次运用到生命周期 onShow，它是在页面打开的时候触发，并且应用处于前台时触发，我们需要它在开始的时候帮我们初始化一些关键数据，获取画布的节点，保存画布的上下文作用域 ctx ，清空管道数据和触发游戏帧绘制。

onShow() {this.el = this.$refs.canvas;this.ctx = this.el.getContext('2d');this.pipe[0] = {x: this.cvsWidth,y: 0,};requestAnimationFrame(this.draw);
},

这里的 this.draw 方法是整个游戏的核心逻辑，涉及小鸟的飞行动画，运动轨迹，边界处理和得分计算。

首先我们从画布的左上角 X 和 Y 轴的起始位置开始绘制游戏的背景。

const ctx = this.ctx;
ctx.drawImage(this.bg, 0, 0);

然后我们绘制小鸟飞行过程中出现在天空和地面的管道，这里需要计算天空的管道位置，上管道的位置需要用两个管道预设的间距加上下管道的高度的出来的，当位置计算出来后，只需要配合定时器或者 requestAnimationFrame 来实时更新管道和鸟的位置就能让用户感知游戏动态画面的效果，这里我使用了 requestAnimationFrame 请求动画帧体验会更好，但是它从 API Version 6 才开始支持，并且不需要你导入，所以读者需要留意你的 SDK 是否是比较新的版本。

for (let i = 0; i < this.pipe.length; i++) {this.constant = this.pipeNorthHeight + this.gap;ctx.drawImage(this.pipeNorth, this.pipe[i].x, this.pipe[i].y);ctx.drawImage(this.pipeSouth, this.pipe[i].x, this.pipe[i].y + this.constant);this.pipe[i].x--;
}

碰撞检测

这里我们使用一个条件判断来做边界处理即碰撞检测，也就是小鸟如果碰到地面，碰到天空的管道或者地面的管道就会使所有动画停止，即游戏结束，如果游戏结束则结算成绩，并且使用 OpenHarmony 内置的弹窗提醒玩家是否需要重新开始新的游戏。

if ((this.bX + this.birdWidth >= this.pipe[i].x &&this.bX <= this.pipe[i].x + this.pipeNorthWidth &&(this.bY <= this.pipe[i].y + this.pipeNorthHeight ||this.bY + this.birdHeight >= this.pipe[i].y + this.constant)) ||this.bY + this.birdHeight >= this.cvsHeight - this.fgHeight
) {prompt.showDialog({buttons: [{ text: "重来一次" }],success: (data) => this.restart(),});clearInterval(this.interval);
}

当处理完边界，我们还需要处理当小鸟一直飞下去的时候，要不断创建新的管道，回收旧管道算得分，这个逻辑也相当之简单，本质上也算是一种碰撞检测，当管道位置变更到画面左侧 X 轴为 5 的位置，即小鸟已经安全通过，则成功得分，当最新的管道变更到画面右侧 X 轴为 125 的位置，即小鸟将要飞跃的下一个管道，则提前创建好下一个新的管道，如果小鸟飞跃的距离比较长，我们还需要考虑优化管道数组，不能让数组无限制的增长下去，我们还可以优化，所以当旧管道已经完全消失在画面中的时候，我们可以考虑把旧管道的数据从数组中删除。

if (this.pipe[i].x == 125) {this.pipe.push({x: this.cvsWidth,y: Math.floor(Math.random() * this.pipeNorthHeight) - this.pipeNorthHeight,});
}
if (this.pipe[i].x == 5) {this.score++;
}

上面所有的这些逻辑本质都是绘制管道的动画，我们配合偏移量和重力因素，很轻易的就能绘制出小鸟的飞行轨迹，我们这里还顺便把得分绘制到屏幕的左下角，以便实时展示玩家得分。

ctx.drawImage(this.fg, 0, this.cvsHeight - this.fgHeight);
ctx.drawImage(this.bird, this.bX, this.bY);
this.bY += this.gravity;
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score : " + this.score, 10, this.cvsHeight - 20);

操作和计分

而我们玩家参与整个游戏只需要一个操作，就是用手指点击屏幕，尽量让小鸟安全飞过管道之间，所以我们需要监听屏幕的点击事件，本质也就是画布的点击事件，当用户点击一下的时候，我们就让小鸟往上方移动一点距离。

moveUp() {this.bY -= 25;
},

而重置游戏跟初始化的逻辑很相似，只要把玩家得分，鸟的位置和管道的数据全部恢复到默认状态即可：

restart() {this.pipe = [];this.pipe[0] = {x: this.cvsWidth,y: 0,};this.constant = 0;this.score = 0;this.bY = 150;
},

封装组件

在这里插入图片描述
在这里插入图片描述

我们是实现一个通用组件希望更进一步，尝试把这个把这个游戏封装成一个通用的组件，查阅官方文档发现实现起来很简单，详情在自定义组件，所谓自定义组件就是是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。综上所述，我们只需要使用 组件把我们刚才实现的组件引入到宿主页面即可。

<element name="Flappy" src="./flappy//pages//index/index.hml"></element>
<div class="container"><Flappy></Flappy>
</div>

文章到这里就差不多实操完成了，更多的鸿蒙开发学习实战，可以去主页查找更多的鸿蒙开发笔记↓↓↓；鸿蒙技术学习路线分布图如下：

技术内容包括：

  • 语言ArkTS
  • ArkUI声明式UI开发
  • Stage模型
  • OpenHarmony的多媒体技术
  • OpenHarmony进程通信
  • OpenHarmony系统移植、裁剪定制
  • OpenHarmony南北向内核开发

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/315958.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

docker安装postgresql15或者PG15

docker安装postgresql15或者PG15

1. 查询版本 docker search postgresql docker pull postgres:15.3 # 也可以拉取其他版本2.运行容器并挂载数据卷 mkdir -p /data/postgresql docker run --name postgres \--restartalways \-e POSTGRES_PASSWORDpostgresql \-p 5433:5432 \-v /data/postgresql:/var/lib/p…
阅读更多...
防火墙未开端口导致zookeeper集群异常，kafka起不来

防火墙未开端口导致zookeeper集群异常，kafka起不来

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 问题描述&#xff1a; 主机信息&#xff1a; IPhostname10.0.0.10host1010.0.0.12host1210.0.0.13host13 在这三台主机上部署…
阅读更多...
clickhouseSQL日期相关

clickhouseSQL日期相关

1. 毫秒级时间戳转日期/小时 --13位时间戳转具体时间 toDateTime(report_time / 1000) as _c00 -- 获取时间戳对应的时间点整点(结果&#xff1a;%Y-%m-%d %H:00:00.0) eg&#xff1a;2022-09-28 23:00:00.0 toStartOfHour(toDateTime(report_time / 1000)) AS _10-- 获取时间…
阅读更多...
认识SpringBoot项目中的Starter

认识SpringBoot项目中的Starter

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 循序渐进学SpringBoot ✨特色专栏&…
阅读更多...
基于 EigenFaces 的人脸检测

基于 EigenFaces 的人脸检测

EigenFaces概述 EigenFaces 人脸检测是一种从主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;中导出的人脸识别和描述技术。 特征脸方法就是从大量的人脸图像中&#xff0c;寻找出人脸的共性。将眼睛、面颊、下颌样板采集协方差矩阵的特征向…
阅读更多...
从零开始 - 在Python中构建和训练生成对抗网络（GAN）模型

从零开始 - 在Python中构建和训练生成对抗网络（GAN）模型

生成对抗网络&#xff08;GANs&#xff09;是一种强大的生成模型&#xff0c;可以合成新的逼真图像。通过完整的实现过程&#xff0c;读者将对GANs在幕后的工作原理有深刻的理解。本教程首先导入必要的库并加载将用于训练GAN的Fashion-MNIST数据集。然后&#xff0c;提供了构建…
阅读更多...
一文了解VR全景技术如何运用在景区旅游宣传

一文了解VR全景技术如何运用在景区旅游宣传

引言&#xff1a; 随着科技的飞速发展&#xff0c;虚拟现实全景技术&#xff08;VR全景&#xff09;正在逐步改变我们的生活。这种技术以其独特的优势&#xff0c;逐步渗透到各个领域&#xff0c;尤其在景区宣传方面&#xff0c;VR全景技术拥有很强的应用潜力。 一、了解VR全景…
阅读更多...
vr眼镜和AR眼镜的区别有哪些?哪些产品可以支持VR应用？

vr眼镜和AR眼镜的区别有哪些?哪些产品可以支持VR应用？

vr眼镜怎么连接手机 要将VR眼镜连接到手机上&#xff0c;您可以按照以下步骤进行&#xff1a; 1. 确保您的手机支持VR应用程序&#xff1a;首先&#xff0c;确保您的手机具备运行VR应用程序的硬件和软件条件。一些VR应用程序可能对设备有特定的要求&#xff0c;如处理器性能、操…
阅读更多...
Linux安装rabbitMq RPM安装 以及带延迟插件

Linux安装rabbitMq RPM安装 以及带延迟插件

rabbitmq安装 文档中rabbitmq下载链接 以及延迟插件 网盘下载 目前下载文件中版本已经过多个服务器安装测试 完全成功 1.安装执行 rpm -ivh openssl-libs-1.0.2k-19.el7.x86_64.rpm --force --nodeps rpm -ivh libnsl-2.34-28.el9_0.x86_64.rpm --force --nodeps rpm -ivh e…
阅读更多...
【实用工具】FFmpeg常用的命令

【实用工具】FFmpeg常用的命令

前言 FFmpeg是一个强大的多媒体处理工具&#xff0c;可以用于处理音频、视频和图像。 命令格式 ffmpeg {1} {2} -i {3} {4} {5} 上面命令中&#xff0c;五个部分的参数依次如下。 1.全局参数 2.输入文件参数 3.输入文件 4.输出文件参数 5.输出文件 常见命令行参数 -c&…
阅读更多...
LanChatRoom局域网聊天室

LanChatRoom局域网聊天室

CPP已经结课&#xff0c;我提交的项目是Qt的入门项目&#xff0c;局域网聊天室LanChatRoom。 这个代码重构了很多遍。第一遍是照着明哥推荐到书&#xff0c;把代码抄了一遍。 但抄下来之后&#xff0c;各种问题&#xff0c;而且是清朝老代码。抄了一遍之后&#xff0c;对代码的…
阅读更多...
二叉树的前序遍历 、二叉树的最大深度、平衡二叉树、二叉树遍历【LeetCode刷题日志】

二叉树的前序遍历 、二叉树的最大深度、平衡二叉树、二叉树遍历【LeetCode刷题日志】

目录 一、二叉树的前序遍历 方法一&#xff1a;全局变量记录节点个数 方法二&#xff1a;传址调用记录节点个数 二、二叉树的最大深度 三、平衡二叉树 四、二叉树遍历 一、二叉树的前序遍历 方法一&#xff1a;全局变量记录节点个数 计算树的节点数: 函数TreeSize用于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023