6.pixi.js编写的塔防游戏(类似保卫萝卜)-游戏资源打包逻辑

这篇具有很好参考价值的文章主要介绍了6.pixi.js编写的塔防游戏(类似保卫萝卜)-游戏资源打包逻辑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 游戏说明

一个用pixi.js编写的h5塔防游戏,可以用electron打包为exe,支持移动端,也可以用webview控件打包为app在移动端使用

环境说明

  cnpm@6.2.0  
  npm@6.14.13  
  node@12.22.7  
  npminstall@3.28.0  
  yarn@1.22.10  
  
  npm config list  
  electron_mirror = "https://npm.taobao.org/mirrors/electron/"  
  home = "https://www.npmjs.org"  
  registry = "https://registry.npmmirror.com/"  

游戏资源打包应用:

可以让资源一次请求,就能获取所有资源。打包过后也可以采用一定的方法对资源进行加密,在没用获得源码的情况下想要获得资源文件是比较困难的。

资源打包:

项目中运行资源 打包

npm run devgen

 需要的库:

@zip.js/zip.js@2.4.10

 在网页上我们可以通过上传文件夹的思路获取文件夹下面的所有文件

 <input type="file" multiple="multiple" webkitdirectory="" directory id="allSpineFile" />

通过监听change事件,获取event对象中的files对象 

然后通过FileReader对象读取文件对象中的数据转换为base64或者字符串然后将他们放在一个json字符串上

然后我们将json字符串转化为blob对象

const b = new Blob([JSON.stringify(obj)])

然后我们通过zip.js对json对象的blob进行打包。

关于加密:

对于异或加密:

异或加密是一种很简单的加密算法。

  • 原理:根据异或的运算规则,在二进制中,相同为0,不同为1。
  • 且:某个数与0异或等于这个数的本身,与1异或等于这个数的相反。
  • 特性:异或运算具有可逆性。
    即:若a xor b=c,则有b xor c=a (a,b,c分别表示0或1)

由上式可得,若a是发送方想要加密的明文信息,则设置一个密钥b,对a和b做异或运算,得到的c就是加密后的密文信息,可进行传输。接收方得到密文信息c后,只需要再与密钥b做异或运算,即可得到原明文信息a。

我们打包过后的对象是一个blob对象,我们可以获取blob对象的arrayBuffer然后我们循环arraybuffer对其中的二进制进行转码从而获得一个同大小的新数组

这里是核心加密方法:

    const pwdCode = [104, 104, 115, 106]
    for (let i = 0; i < uint8.length; i++) {
      const codeIndex = i % 4
      uint8[i] = uint8[i] ^ pwdCode[codeIndex]
    }

其对应的解密也是上面的代码。

当然有时候对于资源打包其实都是通过读取文件的arraybuffer对象然后写入到zip对象中在游戏运行的时候只需要去读取zip中的blob就可以了,我们这里转化为了一个大json其实是不怎么正确的做法。

关于如何将blob的图片对象预览到浏览器:

可以通过方法URL.createObjectURL(blob)来获取一个访问图片对象的url地址

这个方法获取的地址在运行中需要注意释放。

释放是通过方法:URL.revokeObjectURL(url)来释放地址

游戏运行截图:

6.pixi.js编写的塔防游戏(类似保卫萝卜)-游戏资源打包逻辑

 项目开源地址:

GitHub - yinhui1129754/towerDefense: 一个使用pixi.js编写的类似保卫萝卜的塔防游戏。文章来源地址https://www.toymoban.com/news/detail-495883.html

到了这里,关于6.pixi.js编写的塔防游戏(类似保卫萝卜)-游戏资源打包逻辑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity游戏源码分享-塔防游戏保卫兔子的食物CarrotFantasy

    Unity游戏源码分享-塔防游戏保卫兔子的食物CarrotFantasy 经典塔防游戏,可发布PC、Andoid、IOS、Web等 下载地址:https://download.csdn.net/download/Highning0007/88189987  

    2024年02月13日
    浏览(36)
  • Unity学习笔记--siki学院保卫萝卜

      在同一个脚本中的执行先后顺序:先左后右 Inspector 赋值   外部调用 Awake OnEnable Start 脚本对象的失活与激活不作用于Awake方法,当方法中只有Awake方法时,控制脚本激活失活的对勾会消失掉  当物体失活又激活的时候,会调用OnEnable 方法,Awake和Start只会在最开始调用一次,

    2024年02月16日
    浏览(40)
  • 参照DefenseGrid在Unity中实现合理的塔防寻路机制

    在一款TD游戏中,最重要的单位就两大类:防御塔(Tower)和敌人单位(Enemy)。在处理敌人单位的AI行为时,最基本也是最重要的就是自动寻路。在各式TD游戏中,防御塔的攻击方式以及敌人单位的Buff机制往往是能做出差异化的地方;而在寻路问题上,几乎是没有差异的,面

    2024年01月24日
    浏览(30)
  • 使用js原生customElements.define()API 实现类似godot游戏引擎的colorRect类

    一共有两个方案,一个是基于div和css的dom渲染,一个是基于canvas的硬件绘图

    2024年02月08日
    浏览(61)
  • Pixi.js的使用整理

    最近在做的一个前端项目中,有一些图像的处理操作(3D图,2D图都有),其中3D图也是通过获取后端服务的图像2D数据进行绘制展示,通过鼠标各种操作调用后端服务来进行重新获取新图数据。这里前端设计到图像的操作使用了PIXIJS,这里将使用的方式做一个说明,以作参考

    2024年02月13日
    浏览(33)
  • 眨个眼就学会了Pixi.js

    本文正在参加「金石计划」 带尬猴,我是德育处主任 当今的Web开发中,图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎,已经成为了许多开发者的首选~~(我吹的)~~。本文将为工友们介绍PixiJS的基础知识和使用方法,希望可以

    2024年02月08日
    浏览(81)
  • Unity实现一个3D塔防游戏

    Unity是一款游戏引擎,可以用来开发各种类型的游戏。在这篇文章中,我们将使用Unity来创建一个3D塔防游戏。本文将从游戏设计开始,一步一步地讲解如何实现一个基本的塔防游戏。 对啦!这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白,也有一些正在

    2023年04月26日
    浏览(46)
  • Unity游戏源码分享-2.5D塔防类游戏

    Unity游戏源码分享-2.5D塔防类游戏         项目地址: https://download.csdn.net/download/Highning0007/88118947

    2024年02月15日
    浏览(44)
  • unity制作一款塔防游戏

    关键技术: 寻路系统 生成怪物算法 粒子系统 line renderer制作追踪射线 相机视角移动、放大 炮弹追踪算法 粒子特效 按钮动画制作 设置几个基准点,用于偏移方向 定义一个Move方法 判断当前行数是否超过位置数组的长度,如果是则直接返回 根据当前位置与目标位置计算出移

    2024年02月08日
    浏览(47)
  • Unity塔防游戏的制作与实现

    一、游戏场景的搭建 首先,我们需要创建一个新的Unity场景,并将场景设置为2D模式。然后,我们需要导入一些必要的素材,如地图、塔、怪物、子弹等。我们可以从Unity Asset Store中下载这些素材,或者自己制作。 对啦!这里有个游戏开发交流小组里面聚集了一帮热爱学习游

    2024年02月14日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包