使用Html5+C#+微信开发移动端游戏详细教程 :（三）使用html5引擎搭建游戏框架

时间 2019-11-11

标签使用 html5+c html 微信开发移动游戏详细教程 html5 引擎搭建框架栏目 HTML 繁體版

原文原文链接

教程里的案例咱们是经过H5游戏引擎开发，目前H5的游戏引擎比较好用的是白鹭，不过对于新手来讲白鹭的开发环境和工具使用过于复杂，这里推荐一个国内大神编写的游戏引擎：lufylegend。直接在页面引入Js文件，就能够开发了，运行效率很是高效，语法是仿AS3语法，懂C#的人上手会很快。html

Lufylegend引擎具体的API和使用方法能够参考官网和论坛：api

http://www.lufylegend.com/api/zh_CN/out/classes/FPS.html浏览器

以前微信上有一款“怪兽必须死”的游戏很火，下面先放几张我仿这个游戏作的demo的成品运行效果图：微信

在接下来的全部系列教程中，我将提供全部游戏图片素材和源代码，你们没必要担忧没有素材，不过若是要开发本身的游戏就要本身准备素材了，必定要找个牛X的美工，否则像我这样就杯具了，一个项目一半时间在本身PS图片……函数

好了，废话很少说，下面正式开始教程：工具

打开WebStorm，第一次进入时建立新的工程：spa

左侧选择一个空项目，设置好路径，点击建立。debug

New一个html页面，并建立文件夹用于存放素材和js文件。设计

最后结构如图所示，在对应的文件夹中放入文件（每篇教程结尾处我会上传相关素材和源码），咱们在图片中放入一个背景图片，在js中放入引擎js文件。code

在页面中引入js <script src="js/lufylegend-1.10.1.min.js"></script>

在body标签中建立一个div，用来显示游戏。

使用引擎初始化游戏。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="js/lufylegend-1.10.1.min.js"></script>

    <title>Title</title>

</head>

<body style="background-color: black;margin: 0 auto">

<div id="H5_Demo">loading……</div>

</body>

</html>

<script>

    //初始化游戏 （游戏帧速度，初始化的div名字，长，宽，初始化调用函数）

    init(1000 / 30, "H5_Demo", 480, 800, main);

    function main() {

        //游戏全屏显示

        LGlobal.stageScale = LStageScaleMode.SHOW_ALL;

        LSystem.screen(LStage.FULL_SCREEN);
    }

</script>

把鼠标移动到右上角，选择用谷歌打开。

屏幕一片漆黑，按F12进行debug，发现并无报错，说明初始化成功了，接下来咱们添加游戏背景图片，让他看起来更醒目：

在main方法中添加以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="js/lufylegend-1.10.1.min.js"></script>

    <title>Title</title>

</head>

<body  style="background-color:#000;margin: 0 auto">

<div id="H5_Demo">loading……</div>

</body>

</html>

<script>

    //初始化游戏 （游戏帧速度，初始化的div名字，长，宽，初始化调用函数）

    init(1000 / 30, "H5_Demo", 480, 800, main);

    function main() {

        //游戏全屏显示，自适应屏幕

        LGlobal.stageScale = LStageScaleMode.SHOW_ALL;

        LSystem.screen(LStage.FULL_SCREEN);

        //居中

        LGlobal.align = LStageAlign.TOP_MIDDLE;


        //建立加载类

        var loader = new LLoader();

        loader.load("images/bg.jpg", "bitmapData");

        //添加加载监听事件，读取到图片后建立图片对象

        loader.addEventListener(LEvent.COMPLETE, function (event) {

            var bgImgData = new LBitmapData(event.target);

            var bgImg = new LBitmap(bgImgData);


            //添加图片到父容器中，这里的父容器没有特别定义，因此直接成为游戏背景

            addChild(bgImg);

        });

    }

</script>

运行游戏，已经看到了游戏背景，这里图片加载方式是游戏过程当中读取图片，好比玩家头像之类的，并不适用于游戏开始时加载，后面咱们将用其余方法一次性加载全部图片，更便于管理和开发。

当咱们放大缩小浏览器时发现游戏窗口并无随之变化，用户的手机不一样会致游戏画面错乱，因此咱们要监听窗口大小变化并实时控制游戏窗口，在初始化方法外添加以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="js/lufylegend-1.10.1.min.js"></script>

    <title>Title</title>

</head>

<body  style="background-color:#000;margin: 0 auto">

<div id="H5_Demo">loading……</div>

</body>

</html>

<script>

    //初始化游戏 （游戏帧速度，初始化的div名字，长，宽，初始化调用函数）

    init(1000 / 30, "H5_Demo", 480, 800, main);

    function main() {

        //游戏全屏显示，自适应屏幕

        LGlobal.stageScale = LStageScaleMode.SHOW_ALL;

        LSystem.screen(LStage.FULL_SCREEN);

        //居中

        LGlobal.align = LStageAlign.TOP_MIDDLE;



        //建立加载类

        var loader = new LLoader();

        loader.load("images/bg.jpg", "bitmapData");

        //添加加载监听事件，读取到图片后建立图片对象

        loader.addEventListener(LEvent.COMPLETE, function (event) {

            var bgImgData = new LBitmapData(event.target);

            var bgImg = new LBitmap(bgImgData);



            //添加图片到父容器中，这里的父容器没有特别定义，因此直接成为游戏背景

            addChild(bgImg);

        });

    }


    addListeners();

    function addListeners() {

        window.addEventListener('resize', resize);

    }

    function resize() {

        LGlobal.align = LStageAlign.TOP_MIDDLE;

        LGlobal.stageScale = LStageScaleMode.SHOW_ALL;

        LSystem.screen(LStage.FULL_SCREEN);

    }

</script>

在resize函数中把游戏初始化时对窗口的控制代码复制过来，一旦浏览器大小发生变化，不管是手机端仍是pc端，始终能保持游戏窗口大小按比例呈现。

本篇教程到此结束，下一篇教程将讲解游戏中层的概念与设计，敬请期待。

本篇源代码+素材下载地址：https://pan.baidu.com/s/1bpL0E4Z

使用Html5+C#+微信 开发移动端游戏详细教程 :（三）使用html5引擎搭建游戏框架

使用Html5+C#+微信开发移动端游戏详细教程 :（三）使用html5引擎搭建游戏框架