如何用AS3开发HTML5游戏中心

来源：蜘蛛抓取(WebSpider) 时间：2017-08-14 10:50 标签： 游戏中心
使用Flash&CS6制作HTML5小游戏
之前介绍了Google
swiffy，该工具的缺点是显而易见的，文件不能太大，还得用AS2编码。下面介绍一个新工具给大家：
先看一下官方的介绍：
利用行业领先的工具创建动画和交互
许多设计人员都熟悉 Flash
Professional 的创作环境。借助 Toolkit for CreateJS，您可以利用 Flash Professional
的核心动画和插图功能，包括矢量、位图、传统补间和声音。
只需单击一下，即可将您的图库转换为 JavaScript
交互设计人员通常利用 Adobe
Flash Professional 来创建针对 Flash Player 和 Adobe& AIR 运行时的资源。借助 Adobe
Flash Professional Toolkit for CreateJS，您可使用开源 CreateJS
框架，轻松将资源和动画导出至 JavaScript。输出会生成格式化良好、可读和可编辑的 JavaScript
代码。让您如虎添翼，设计出能够在任何 HTML5
兼容移动设备或桌面浏览器中运行的极富表现力的内容。
更轻松地利用“画布”元素进行创作
借助 Toolkit for
CreateJS，Flash Professional，用户可更轻松地利用 HTML5 中的“画布”元素进行创作。对于
ActionScript& 开发人员，CreateJS 为其提供了一整套 JavaScript 库 — 包括图形、声音、预加载和动画
— 以帮您创建 HTML5 标准的内容，所有这些工作均可在多数 Flash 开发人员熟悉的环境中完成。
利用有效的设计人员 —
开发人员工作流程
Toolkit for
CreateJS 专门设计用于优化网页开发工作流程。在 Flash Professional CS6
中创建资源和动画后，设计人员可在导出前在浏览器中进行预览。开发人员接收到资源后，可将它们作为可重用的 JavaScript
元件使用并采用熟悉的 CreateJS 框架添加交互。
进过尝试和学习，总结如下：
1.CreateJS非常合适将Flash动画转化为HTML5，所有图片，声音都是从外部加载，生成的文件和swf差不多大。
2.可以使用Flash IDE来编写简单的gotoAndPlay，onClick等JS函数，例如：
3.任何的交互需要用JS去写，虽然可以利用Flash
IDE来编写简单的JS函数，但由于与JS稍有差别，所以建议要熟练掌握JS的交互方式。
4.最大优势：自动创建舞台元素，能节省大量的开发准备时间。
5.最大遗憾：缺少调试工具，使复杂项目的开发调试变得异常痛苦。当然，目前并没有一款非常棒的HTML5开发调试工具（如果有的话请告诉我），对于AS3程序员来说，createJS还是非常容易上手的。
经过多个浏览器测试，FF居然不支持声音的播放，困惑中，强烈希望下一个Adobe
cs版本，能出一款与Flash、dw配合使用的HTML5调试软件，呵呵。
最后贴一个用CreateJS做的游戏Demo：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。教程里的案例我们是通过H5游戏引擎开发，目前H5的游戏引擎比较好用的是白鹭，不过对于新手来说白鹭的开发环境和工具使用过于复杂，这里推荐一个国内大神编写的游戏引擎：lufylegend。 直接在页面引入Js文件，就可以开发了，运行效率非常高效，语法是仿AS3语法，懂C#的人上手会很快。
Lufylegend引擎具体的API和使用方法可以参考官网和论坛：
/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"&
&meta charset="UTF-8"&
&script src="js/lufylegend-1.10.1.min.js"&&/script&
&title&Title&/title&
&body style="background-color:margin: 0 auto"&
&div id="H5_Demo"&loading……&/div&
//初始化游戏 （游戏帧速度，初始化的div名字，长，宽，初始化调用函数）
init(1000 / 30, "H5_Demo", 480, 800, main);
function main() {
//游戏全屏显示
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
把鼠标移动到右上角，选择用谷歌打开。
屏幕一片漆黑，按F12进行debug，发现并没有报错，说明初始化成功了，接下来我们添加游戏背景图片，让他看起来更醒目：
在main方法中添加如下代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&script src="js/lufylegend-1.10.1.min.js"&&/script&
&title&Title&/title&
style="background-color:#000;margin: 0 auto"&
&div id="H5_Demo"&loading……&/div&
//初始化游戏 （游戏帧速度，初始化的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.PLETE, function (event) {
var bgImgData = new LBitmapData(event.target);
var bgImg = new LBitmap(bgImgData);
//添加图片到父容器中，这里的父容器没有特别定义，所以直接成为游戏背景
addChild(bgImg);
运行游戏，已经看到了游戏背景，这里图片加载方式是游戏过程中读取图片，比如玩家头像之类的，并不适用于游戏开始时加载，后面我们将用其他方法一次性加载所有图片，更便于管理和开发。
当我们放大缩小浏览器时发现游戏窗口并没有随之变化，用户的手机不同会致游戏画面错乱，所以我们要监听窗口大小变化并实时控制游戏窗口，在初始化方法外添加如下代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&script src="js/lufylegend-1.10.1.min.js"&&/script&
&title&Title&/title&
style="background-color:#000;margin: 0 auto"&
&div id="H5_Demo"&loading……&/div&
//初始化游戏 （游戏帧速度，初始化的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.PLETE, 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);
在resize函数中把游戏初始化时对窗口的控制代码复制过来，一旦浏览器大小发生变化，不论是手机端还是pc端，始终能保持游戏窗口大小按比例呈现。
本篇教程到此结束，下一篇教程将讲解&& 游戏中层的概念与设计，敬请期待。
本篇源代码+素材 下载地址：/s/1bpL0E4Z
阅读(...) 评论()

我要回帖

更多关于 游戏中心 的文章

 

随机推荐