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

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

Lufylegend引擎具体的API和使用方法可以参考官网和论坛:

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

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

在接下来的所有系列教程中,我将提供所有游戏图片素材和源代码,大家不必担心没有素材,不过如果要开发自己的游戏就要自己准备素材了,一定要找个牛X的美工,不然像我这样就杯具了,一个项目一半时间在自己PS图片……

好了,废话不多说,下面正式开始教程:

打开WebStorm,第一次进入时创建新的工程:

左侧选择一个空项目,设置好路径,点击创建。

New一个html页面,并创建文件夹用于存放素材和js文件。

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

在页面中引入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_Dome">loading……</div>

</body>

</html>

<script>
    //初始化游戏 (游戏帧速度,初始化的div名字,长,宽,初始化调用函数)

    init(1000 / 30, "H5_Dome", 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_Dome">loading……</div>

</body>

</html>

<script>

    //初始化游戏 (游戏帧速度,初始化的div名字,长,宽,初始化调用函数)

    init(1000 / 30, "H5_Dome", 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_Dome">loading……</div>

</body>

</html>

<script>

    //初始化游戏 (游戏帧速度,初始化的div名字,长,宽,初始化调用函数)

    init(1000 / 30, "H5_Dome", 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端,始终能保持游戏窗口大小按比例呈现。

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

(一)、序(关于作者创业失败的感想)

(二)、准备工作&开发环境

(三)、使用html5引擎搭建游戏框架

(四)、游戏中层的概念与设计

(五)、游戏图像的加载与操作

(六)、游戏界面布局与性能优化

(七)、怪物的动画与位移

(八)、英雄的攻击与特效

(九)、添加全屏技能与特效

(十)、游戏功能菜单的添加与设计

(十一)、游戏道具的设计与特效

(十二)、游戏数值的平衡

(十三)、游戏排行榜的实时更新

(十四)、游戏登录界面

(十五)、游戏数据库的设计

(十六)、游戏与服务器的交互

(十七)、游戏在微信中的运营

(十八)、游戏充值和付款(微信支付&支付宝支付)

(十九)、游戏项目工程在(微信)平台中的网络框架

(二十)、附①:游戏性能与服务器高并发优化

(二十一)、附②:游戏的作弊与防范

(二十二)、附③:游戏平台合作方案与分销系统

(二十三)、附④:实战篇:独立开发一款“模拟经营”的Html5手游。

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

时间: 2024-10-24 05:49:08

使用Html5+C#+微信 开发移动端游戏详细教程 :(三)使用html5引擎搭建游戏框架的相关文章

使用Html5+C#+微信 开发移动端游戏详细教程 总目录

(一).序(关于作者创业失败的感想) (二).准备工作&开发环境 (三).使用html5引擎搭建游戏框架 (四).游戏中层的概念与设计 (五).游戏图像的加载与操作 (六).游戏界面布局与性能优化 (七).怪物的动画与位移 (八).英雄的攻击与特效 (九).添加全屏技能与特效 (十).游戏功能菜单的添加与设计 (十一).游戏道具的设计与特效 (十二).游戏数值的平衡 (十三).游戏排行榜的实时更新 (十四).游戏登录界面 (十五).游戏数据库的设计 (十六).游戏与服务器的交互 (十七).游戏在

使用Html5+C#+微信 开发移动端游戏详细教程 :(一)序(关于作者创业失败的感想)

说起梦想,我清楚的记得2012年7月初毕业,拿到毕业证书的那天果断买好了次日南下去深圳的绿皮火车票,500多块,26个小时车程.第二天就拖上行李到了深圳. 一开始的想法仅仅是过去想见见世面,学习点新技术,不过对于刚毕业的人来说机会并不多,何况我还是大专文凭,整日游荡在人才市场和出租房之间, 不过好在工作还是找到了,但工资只有2000多,基本吃饭加房租就没了,技术上也没什么长进,深圳的消费和房价让人望尘莫及.半年不到之后,卷铺盖走人. 回到老家后,应他人邀请到常州发展,在一个旅游公司做网站,修电脑

使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性能优化

本篇教程我们主要讲解在游戏界面上的布局一般遵循哪些原则和一些性能优化的通用方法. 接着教程(五),我们通过Loading类一次性加载了全部图像素材,现在要把我们所用到的素材变成图片对象显示在界面上,由上而下,首先是top层,top里面包涵了玩家(微信)头像,关卡信息,怪物血条信息,玩家金币,玩家宝石,玩家总攻击力. 定义函数 setTop 来初始化top层: function setTop() { TopDiv = new LSprite();//定义top层 var Topshape = ne

使用Html5+C#+微信 开发移动端游戏详细教程 :(二)准备工作&amp;开发环境

C#开发环境:VS2013; H5开发环境:WebStorm; 数据库:mysql+navicat管理工具: 操作系统:win7: 调试:chrome浏览器 如果想在微信端上线运营游戏请做好以下准备工作: 注册企业营业执照: 申请1个域名并通过企业认证: 独立服务器(CDN加速:RDS数据库): 域名备案: 申请微信服务号并通过企业认证, 开通微信和支付宝商户: 申请微信手机支付和支付宝即时到帐业务: 一切就绪后我们就可以开工了.

微信开发H5十二人牛牛出租源码下载搭建

微信开发H5十二人牛牛出租源码下载搭建h5.fanshubbs.com联系Q1687054422不同于传统的手游商店下载模式,HTML5 手机网页游戏是可以直接运行在微信内置的浏览器里. 先上图,感知一下具体样子: 而我想分享的是我们在具体开发实现过程中,基于微信的Html5 WebApp需要去克服的一些坑:这个小游戏的基本规则是:限定用户每天刮书次数是2次 (自由刮一次和分享后再刮一次),每天都可刮奖为此,我们希望实现的思路首先是限定在只能使用微信中玩,实现代码如下:if (!HttpCont

HTML5,微信开发原码社区

HTML5开发助手,快速查看HTML及javascript接口文档 http://www.9miao.com/thread-60966-1-1.html 简洁的手机wap公司产品展示网站模板下载html http://www.9miao.com/thread-57489-1-2.html html5手指滑动切换微信过年专题页面模板下载 http://www.9miao.com/thread-57783-1-2.html 仿易企秀微信场景源码 一键采集官方场景+个人中心 http://www.9m

html5+jQuery Mobile开发移动端wap经验总结(二)- a / input样式重新定义

jQuery mobile中,很多样式都是写好的,虽然有主题,但是对于个性化的wap网站来说,还是很难驾驭的. 使用html5+jQuery Mobile做了几个页面之后,中间所遇到的问题,以及解决方法,现在加以总结,以便过后查阅. 问题: 1.a的颜色重新定义问题 2.input中button颜色问题. input输入框中,左边图标展示问题(文字缩进) 3.上文中的图标自定义问题[上文已经说明,通过ui-icon-XXX:after进行重新定义] 解决: 1-2.a / input的重新定义均

学习html5 app项目开发

这周因为部门接了个小的html5 app case,所以从事android开发的我就接下了这个项目.与其说是项目需要,其实更大部分是我自己想要做html5 app,因为我对这个全新的平台已经好奇很久了.蠢蠢欲动很久了,只不过之前没有碰到项目练手而已. 好了,让我们开始这篇博文的主要内容吧.说到html5相信大家都不陌生了,的确这个概念已经在国内火了一段时间,但是大家对于html5具体能够干什么,到底在什么地方我应该使用html5呢?然后html5相较之前的版本又多了什么呢?且听我慢慢到来吧,首先

微信开发实战入门视频教程(Android4.4.2)

基于移动技术微信公众平台开发实战入门(Android4.4.2,微移动应用,项目实战) 适合人群:初级课时数量:40课时用到技术:微移动应用涉及项目:手机微信开发 qq:1840215592 课程内容简介微信腾讯公司推出的一个即时通讯服务的应用,微信提供公众平台.朋友圈.消息推送等功能,预计到2014年年底其注册用户量将突破10亿.面对一个用户数如此巨大的家伙,大家怎么能放过,都迫不及待的希望自己的应用能够跟微信产生一些联系.那么我们这套课程要讲的就是如何跟微信产生连接,如何将我们的网站接入到微