html5rpg游戏策划案,HTML 5开发RPG游戏之一(地图人物实现)
在地图显示的时候,首先把图片切割,然后在根据预先设定好的位置显示到地图层上,这样我们就看到了一张完整的地图了
接下来,打开Main.js
在里面加入
init(50,"mylegend",480,320,main);
在legendForHtml5Progarmming中,用init这个函数来初始化canvas,上面的代码表示,初始化一个速度为50,名字为mylegend,大小为480*320的游戏界面,初始化完成后调用main(),这个速度值是说每个多少毫秒游戏循环一次,所以这个值设定的越小,游戏运行的速度就越快
因为要调用main方法,所以我们要写一个main方法,main方法里做一些简单的准备工作。
虽说读取图片只需要一个
loader.load("map.jpg","bitmapData");
但是游戏中往往用到很多张图片,你可以用到哪一张再加载哪一张,也可以一次性全部加载完,然后再开始显示游戏
为了一次性把图片加载完,我的做法是,将需要的图片放到一个数组里,然后设定一个索引,每加载一个图片,让这个索引加1,当这个索引小于数组的长度,则继续加载,直到将数组中的图片全部加载完,然后开始进行下一步的工作
具体实现看下面的代码
//图片path数组
varimgData=newArray();
//读取完的图片数组
varimglist= {};
function main(){
//准备读取图片
imgData.push({name:"map",path:"./image/map.jpg"});
imgData.push({name:"mingren",path:"./image/mingren.png"});
imgData.push({name:"e1",path:"./image/e1.png"});
imgData.push({name:"e2",path:"./image/e2.png"});
//实例化进度条层
loadingLayer=newLSprite();
loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
addChild(loadingLayer);
//开始读取图片
loadImage();
}
function loadImage(){
//图片全部读取完成,开始初始化游戏
if(loadIndex>= imgData.length){
removeChild(loadingLayer);
legendLoadOver();
gameInit();
return;
}
//开始读取图片
loader=newLLoader();
loader.addEventListener(LEvent.COMPLETE,loadComplete);
loader.load(imgData[loadIndex].path,"bitmapData");
}
function loadComplete(event){
//进度条显示
loadingLayer.graphics.clear();
loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");
//储存图片数据
imglist[imgData[loadIndex].name] = loader.content;
//读取下一张图片
loadIndex++;
loadImage();
}
上面的代码不难明白,当图片没有读取完之前,会不断循环loadImage和loadComplete两个方法,当读取完之后,移除进度条,用legendLoadOver告诉游戏已经读取完成,然后调用gameInit方法,进行游戏的初始化工作。
看gameInit方法
function gameInit(event){
//游戏层显示初始化
layerInit();
//添加地图
addMap();
//添加人物
addChara();
}
在gameInit方法中,首先进行游戏层的初始化,然后添加游戏地图,然后添加人物
游戏层显示初始化,按照我们一开始所说,我们一次来初始化地图层,人物层,效果层,对话层,控制层
//游戏层显示初始化
function layerInit(){
//游戏底层添加
backLayer=newLSprite();
addChild(backLayer);
//地图层添加
mapLayer=newLSprite();
backLayer.addChild(mapLayer);
//人物层添加
charaLayer=newLSprite();
backLayer.addChild(charaLayer);
//效果层添加
effectLayer=newLSprite();
backLayer.addChild(effectLayer);
//对话层添加
talkLayer=newLSprite();
backLayer.addChild(talkLayer);
//控制层添加
ctrlLayer=newLSprite();
backLayer.addChild(ctrlLayer);
}
有了游戏层次的划分,我们在添加游戏对象的时候,将地图添加到地图层,人物添加到人物层,他们就会依次显示在游戏的界面
下面开始添加地图
首先我们需要准备好显示地图的数组
//地图图片数组
varmap= [
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]
];
这些数字分别对应着图中如下位置
html5rpg游戏策划案,HTML 5开发RPG游戏之一(地图人物实现)相关推荐
- html5游戏开发-零基础开发RPG游戏-开源讲座(四)
了解上三篇的内容请点击: html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一) http://www.html5cn.org/a ...
- 使用Unity开发RPG游戏完整指南(全)
使用Unity开发RPG游戏完整指南(全) - GameRes游资网 关注公众号 风色年代(itfantasycc) 200G Unity资料合集送上~ 本教程教大家如何使用Unity创建一个RPG游 ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴对话实现
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下 想要了解前两篇内容,请电击下面的链接 html5游戏开发-零基础开发RPG游戏-开源讲座(一) ...
- 使用J2ME技术开发RPG游戏(一)——程序框架
使用J2ME技术开发RPG游戏(一)--程序框架 作者:陈跃峰 出自:http://blog.csdn.net/mailbomb RPG(角色扮演游戏)是手机游戏中的一类主要类型,也是相对来说比较麻烦 ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化地图跳转
首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东 ...
- 【第137期】游戏策划:不用编程,在游戏里做一个双开门
我是酱油,这是第137期文章 昨晚跟朋友打羽毛球,聊到加班的事. 我开玩笑说,对于咱们这种游戏人,加不加班并没有太大区别,无非就是在公司做事,还是在家里做事,本质上都一样. 家里的电视,平日基本不开. ...
- 【第169期】想做游戏策划,我建议学学与游戏无关的东西
我是酱油,这是第169期文章 从朋友那里听说个事,他们公司的一位执行策划,跟运营部的领导吵起来了,因为双方观点达不成一致,最后主策开口妥协了. 本来这事也就告一段落了,谁知这位策划同学当场强烈抵触,场 ...
- 放学默示录Ⅰ:来!抠奖 移动游戏策划案
游戏名称:放学默示录 游戏类型:休闲类 单机版带网络服务 运营方式:道具收费,捐赠. 游戏背景:以学生放学后的小摊游艺为参考. 游戏玩法: 游戏分为默示录模式,日常模式,大赛模式,小游戏. 游戏元素: ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(一)
因为上一篇雷电的开发中,有朋友反应不太理解,本篇将以零基础的视点,来讲解如何开发一款RPG游戏. 在游戏的世界里,我们可以看到各种地图,各种游戏人物,看到人物在地图上行走,对话等,无论是地图还是人物, ...
- VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发
本节开始,我们将基于上一个项目所学到的知识,利用createjs 和 Tween两个图形绘制库开发一款新的游戏,名为欲望都市.这个游戏具备一个特点就是2.5D,它是一种经济系统构建型游戏,开始时玩家得 ...
最新文章
- 固定表头和首行_Excel一步制作斜线表头!还有这些高分Excel表头技巧,看完秒会...
- mysql 缓存区_Mysql缓存的配置和使用
- 洛谷P5174 圆点
- [javaweb] servlet 服务器端转发和客户端重定向 (四)
- BTS3410G参数
- 设计模式之_工厂系列_03
- [转]整理一些好的开源项目
- js实战代码系列—带你玩jQuery带你飞
- 软件质量模型的6大特性27个子特性
- python分类算法评估模型_Python机器学习(sklearn)——分类模型评估与调参总结(下)...
- JavaScript的事件绑定及深入
- MySQL 数据查询
- 457.环形数组循环
- ensp 双机热备 配置_华为交换机VRRP配置教程(一)
- 使用linux批量引物设计,使用SSRMMD便捷、迅速与准确地进行:SSR位点检测,多态性SSR筛选,与批量SSR引物设计...
- C语言普通字体转换花体 英文网名神器
- 软件测试--面试时怎么介绍前公司的项目经验
- 独立个人项目开发心得 - 任务切分、挑战性、实用性和半途而废
- 名字里有计算机里没有的字体大小,公安13000字的庞大字库打不出这些字 五市民名字让电脑“犯晕”...
- re之ida和OllyDbg的使用与代码分析
热门文章
- [TLSR8266] 1、搭建tlsr8266编译框架在win服务器中
- Win10设置文件夹背景色
- 解决:fatal error: opencv2/xfeatures2d.hpp: No such file or directory
- xamarin android 标签,Xamarin.Android使用教程:Android项目结构
- linux文件怎么加密,linux下文件加密方法总结
- Android NFC开发(一)
- java初级面试总结
- 029--PM话术模板
- 计算机c盘如何扩容,C盘满想换SSD遇涨价?教你C盘扩容技巧
- 我的世界服务器物品栏mod,我的世界1.7.10内置合成表MOD 物品管理器