快捷搜索:  汽车  科技

h5小游戏的开发流程:H5小游戏开发从0出发

h5小游戏的开发流程:H5小游戏开发从0出发在这之前 我们要下载并安装好 VSCODE,因为laya2.0版本以后不支持内置VSCODE了,找到官方网址 点下载就好 下好以后是个绿色的包 不用安装,直接启动就好了1. 安装开发环境2. 运行第一个示例DEMO3. 配置好debug环境 让游戏可以进行调试。

这是一篇关于小游戏入门的文章 本人一直从事的都是游戏开发方面的工作 前几年的端游到现在地方性游戏 对小游戏了解得比较少 这几天心血来潮 突然想研究一下小游戏 然后自己写几个童年的小游戏。于是有了下面的这篇文章。

这次我想采取文章加视频的方式 先文章 后面再录个教学视频

之前游戏开发用是cocos 这次我决定选择laya 因为之前没有弄过 可能要多花一点时间了

步骤

1. 安装开发环境

2. 运行第一个示例DEMO

3. 配置好debug环境 让游戏可以进行调试。

h5小游戏的开发流程:H5小游戏开发从0出发(1)

找到官方网址 点下载就好 下好以后是个绿色的包 不用安装,直接启动就好了

在这之前 我们要下载并安装好 VSCODE,因为laya2.0版本以后不支持内置VSCODE了,

还有GOOGLE 浏览器

这三个工具安装好后 我们要配置一下 就可以进行联调了。

然后 我们打开LayaAireIDE

h5小游戏的开发流程:H5小游戏开发从0出发(2)

新建项目 选择开发语言 接下来 我们在LayaAirIDE中关联VSCode

h5小游戏的开发流程:H5小游戏开发从0出发(3)

h5小游戏的开发流程:H5小游戏开发从0出发(4)

点击浏览或者拖动VSCode安装目录的VSCode可执行文件,到工具路径配置面板的第二个输入框,再点保存。即完成了IDE与VSCode的关联。

h5小游戏的开发流程:H5小游戏开发从0出发(5)

然后我们再看一下IDE的主界面

h5小游戏的开发流程:H5小游戏开发从0出发(6)

这就是主界面的一些布局下面我们 要先让这个DEMO 跑起来 看看效果

h5小游戏的开发流程:H5小游戏开发从0出发(7)

h5小游戏的开发流程:H5小游戏开发从0出发(8)

当然也可以在VSCODE中按F5运行 效果是一样的。 下面我们来进行最重要的一步,就是能让代码DEBUG起来,这样方便能调试,尽快找到问题。在项目文件夹中找到

h5小游戏的开发流程:H5小游戏开发从0出发(9)

h5小游戏的开发流程:H5小游戏开发从0出发(10)

这两个文件 然后修改一下

h5小游戏的开发流程:H5小游戏开发从0出发(11)

h5小游戏的开发流程:H5小游戏开发从0出发(12)

把soureMap 原来的false全改成 true 就可以断点断下来了。

h5小游戏的开发流程:H5小游戏开发从0出发(13)

差不多就这样 教程结束如果有不懂的可以去看我发的视频,里面有操作方法。

猜您喜欢: