如何使用egret开发微信小游戏(一)Hello World

时间:2024-03-25 08:31:52

如何使用egret开发微信小游戏(一)Hello World

微信小游戏上线以来,凭借微信海量的用户,取得了巨大的成功,从跳一跳到大家一起来滑水,从2d游戏到3d游戏,许多游戏开发者都赚的盆满钵满,我想通过几篇文章来给大家介绍下是如何开发微信小游戏的,希望帮助广大游戏开发者能进入H5小游戏行业中来,也欢迎大家吐槽(本文仅适合启蒙小白)。

2015年以来,h5游戏发展迅猛,各类游戏引擎也都铺天盖地而来,应用比较广泛的有Custrunct2,Phaser,PIXI,egret,cocos-creator,layabox,国内的引擎主要是egret,cocos-creator和layabox,各有各的优点,但也都有各自的坑。

为什么选择egret,主要是完全免费,工具较多,而且简单,个人认为对于没有h5编程基础的人容易上手,该教程主要讲egret开发的整个流程,后面我有时间会通过几个游戏是实战教程,给大家讲讲egret的开发。欢迎持续关注。

准备

1.egret官网:https://egret.com/
2.在官网下载Egret Launcher,下载最新稳定版本的引擎
3.下载安装微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

如何使用egret开发微信小游戏(一)Hello World

image.png

3.并在工具栏里安装4个主要工具,一般开发有这四个就够了


如何使用egret开发微信小游戏(一)Hello World

image.png

Egret Wing3:代码编辑的IDE

DragonBones:制作骨骼动画的工具(类似于spine)

Res Depot:资源管理工具(处理资源加载组,预加载资源,游戏主内容资源分组)

Texture Merger:图片资源的处理工具(动画,散图合并,位图字体的制作)

 

项目开发(本文不涉及具体代码,后面我再详细给大家介绍)

一.新建项目(可以使用Egret Launcher和Egret Wing3新建项目,任意选择一个)

1.使用Egret Launcher新建项目

如何使用egret开发微信小游戏(一)Hello World

image.png


2.使用Egret Wing3新建项目
文件-新建项目->Egret 游戏项目

如何使用egret开发微信小游戏(一)Hello World

image.png

 

如何使用egret开发微信小游戏(一)Hello World

image.png

二.项目结构介绍

1.资源包结构(resource),所有项目中用到的图片,音频,配置文件都放到resource目录下

 

如何使用egret开发微信小游戏(一)Hello World

image.png

2.代码包结构(src),所有项目代码都放入src目录中去管理

 

如何使用egret开发微信小游戏(一)Hello World

image.png

运行和编译发布项目

1.浏览器打开项目

 

如何使用egret开发微信小游戏(一)Hello World

image.png

最后:看效果

 

如何使用egret开发微信小游戏(一)Hello World

image.png

2.编译发布微信小游戏项目

最后我们把项目发布成微信小游戏项目,并在微信开发者工具上运行
再次启动Egret Launcher并选择项目中发布设置


如何使用egret开发微信小游戏(一)Hello World

image.png

如何使用egret开发微信小游戏(一)Hello World

image.png

如何使用egret开发微信小游戏(一)Hello World

image.png

如何使用egret开发微信小游戏(一)Hello World

image.png

3.微信开发者工具启动小游戏(调试和上传项目都需要该工具)

启动微信开发者工具-并添加之前发布的微信项目


如何使用egret开发微信小游戏(一)Hello World

image.png

 

选择之前发布的微信项目目录导入


如何使用egret开发微信小游戏(一)Hello World

image.png


如何使用egret开发微信小游戏(一)Hello World

image.png

总结:第一次写教程,如有不清楚的同学欢迎给我私信,后面我会不断更新我的教程,帮助大家共同进步。

下一篇我会主要讲下微信排行榜的开发和并和游戏部分通信,分享功能等

这个是我们的微信小游戏,欢迎吐槽

 

如何使用egret开发微信小游戏(一)Hello World

image.png