VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发

本节开始，我们将基于上一个项目所学到的知识，利用createjs 和 Tween两个图形绘制库开发一款新的游戏，名为欲望都市。这个游戏具备一个特点就是2.5D,它是一种经济系统构建型游戏，开始时玩家得到的是一个空白的城市地图，玩家以市长的身份选择在城市中构建各种设施，通过不同设施的组合何以产生金币，基本情况如下：

玩家可以在每一个小格配置一种建筑，总共可以有三种建筑可以选择，一种是电厂，建造电厂可以增加人口，有了人口才能建造其他建造，依据上图，黄色带有闪电标识的建筑就是电厂，第二种建筑胶钱币工厂，有了这种建筑，城市才会有收入，但是建筑钱币工厂会消耗人口，右上角的标识意思是当前城市可以容纳70人口，其中50个人口已经被钱币工厂消耗掉了。第三种建筑是商店，有了商店就可以使用金币购买钻石，玩家的任务是配置三种建筑，最终使得城市具有的金币和钻石数量最大化，三种可供选择的建筑如下：

选取其中一种建筑后，就可以通过鼠标把建筑拖拽到城市土地的小格子中，建筑的建造过程跟‘红警’类似，经过一系列形态变化后才最终形成相应模样，因此玩起来时也是饶有趣味。

在游戏开发时，我们把整个设计分成三部分，一部分叫背景图层，第一张图中，蓝色的背景加上飘动的云朵就是背景图层；第二部分叫城市图层，最上图中中间部分，用来配置各种建筑图案区域就是城市图层，第三部分叫UI图层，第一张图中，画面上的各种按钮，标志，例如右上角的人口数量标志，右下角的按钮，左上角的钱币数量标志和钻石数量标志，他们合在一起形成了UI图层，整个游戏的开发将分别处理三个图层，然后再通过底层逻辑把三个图层整合成一个整体。

首先我们先动手开发背景图层的功能。先像以前项目一样启动一个新的VUE工程，然后在index.html里面把createjs和tween这两个库引入项目，代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script type="text/javascript" src="./static/tweenjs-0.5.1.min.js"></script><script type="text/javascript" src="./static/easeljs-0.7.1.min.js"></script><script type="text/javascript">window.createjs = createjs</script><title>Isometric City</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

接着再components目录中，创建gamecontainer.vue这个容器组件，它的内容跟上一个项目一样，这里就不详述了，我们看看gamecomponent.vue的代码实现，首先我们需要给页面添加一个canvas控件，因为所有的游戏动画都需要绘制在canvas控件上:

<template><div><canvas id="canvas" width="960" height="480"></canvas></div>
</template>

接着我们实现游戏的逻辑代码，由于我们先实现背景图层，游戏的背景是一个大蓝天，同时有两朵白云动态的从右边慢慢飘向左边，因此我们要实现这个动画效果，首先我们设置组件的内部数据：


<script>export default {data () {return {gameWidth: 960,gameHeight: 480,cjs: null,canvas: null,stage: null}},....
}

游戏的宽和高分别是960和480像素，cjs将用来对应createjs的库对象，canvas对应画布控件对象，stage是用来容纳一切动画元素的容器对象，它的具体说明在上一个项目详细讲解过。

接下来实现组件的初始化，当组件被页面加载时，他需要做一系列的数据初始化操作，代码如下：

init () {this.cjs = window.createjsthis.canvas = document.getElementById('canvas')this.stage = new this.cjs.Stage(this.canvas)var backGround = this.bgLayer()this.stage.addChild(backGround)this.cjs.Ticker.setFPS(40)this.cjs.Ticker.addEventListener('tick', this.tick)},tick () {this.stage.update()},

其中的backGround就是我们一会要开发的背景图层对象，我们设置画面的更新频率是每秒40帧。接下来我们看看背景图层是如何设计的，代码如下：

layer () {var obj = new this.cjs.Container()return obj},cityLayer () {var obj = this.layer()return obj},bgLayer () {var layer = this.layer()var bitmap = new this.cjs.Bitmap('../../static/images/bg.png')layer.addChild(bitmap)var cloud1 = new this.cjs.Bitmap('../../static/images/cloud1.png')cloud1.y = 30cloud1.alpha = 0.4layer.addChild(cloud1)this.cjs.Tween.get(cloud1, {loop: true}).to({x: this.gameWidth + 300}, 0).wait(15500).to({x: -300}, 50 * 1000)var cloud2 = new this.cjs.Bitmap('../../static/images/cloud2.png')cloud2.y = 300cloud2.alpha = 0.4layer.addChild(cloud2)this.cjs.Tween.get(cloud2, {loop: true}).to({x: this.gameWidth + 50}, 0).wait(500).to({x: -300}, 50 * 1000)return layer}

layer函数是所有图层对象的基础，它返回的是一个容器对象，cityLayer返回的是城市图层，这里我们先简单返回一个容器对象，以后再进行详细的代码添加。bgLayer()函数绘制的就是背景图层了，它先加载两张图片，作为位图对象，这两张图片对应两片云彩，代码分别设置两片云彩图案在页面上绘制的位置y坐标为30和300，透明度是0.4，其中两个语句：

this.cjs.Tween.get(cloud1, {loop: true}).to({x: this.gameWidth + 300}, 0).wait(15500).to({x: -300}, 50 * 1000)this.cjs.Tween.get(cloud2, {loop: true}).to({x: this.gameWidth + 50}, 0).wait(500).to({x: -300}, 50 * 1000)

第一个语句的作用是，先让第一张图片处于画布最右方再向右偏移300像素的位置，然后等待大概15秒，也就是wait(15500)的作用，然后产生动画效果，把图案从原来的位置平移到x坐标为左边-300像素的地方，这个渐变过程持续50秒，也就是to的第二个参数50*1000。

第二句代码的作用是一样的，上面代码完成后，加载页面，可以得到如下效果：

两片白云图案慢慢的从右边挪动到左边，完了后这个过程不断重复。这就完成了我们想要的背景图层的设计。接下来我们完成UI图层的设计，继续在组件中添加如下代码：

uiLayer () {var obj = this.layer()this.setupHUD(obj)return obj},placeBitmap (layer, path, x, y) {var bitmap = new this.cjs.Bitmap(path)bitmap.x = xbitmap.y = ylayer.addChild(bitmap)},placeText (layer, textStr, size, x, y, align) {var text = new this.cjs.Text(textStr, size + 'px Arial', '#222')text.x = xtext.y = ytext.textAlign = alignlayer.addChild(text)return text},setupHUD (layer) {this.placeBitmap(layer, '../../static/images/candies.png', 28, 16)this.placeBitmap(layer, '../../static/images/diamonds.png', 154, 14)this.placeBitmap(layer, '../../static/images/populations.png', 810, 14)this.consIndicator = this.placeText(layer, '12345', 12, 123, 34, 'right')this.diamondsIndicator = this.placeText(layer, '0', 12, 250, 34, 'right')this.populationIndicator = this.placeText(layer, '100', 16, 845, 32, 'center')}}

上面代码加载了几个图片，并生成了几个字符串对象，然后把他们添加到一个图层容器中，最后我们在初始化函数中，把UI图层对象添加到舞台容器中:

init () {....var uilayer = this.uiLayer()var citylayer = this.cityLayer()this.stage.addChild(backGround)this.stage.addChild(uilayer)this.stage.addChild(citylayer)....
}

完成上面代码后，我们得到的游戏场景如下：

到这里，我们就完成了第一阶段的背景图层和UI图层的设计，接下来我们将把精力集中到游戏图层以及游戏主逻辑的设计之中。

更详细的讲解和代码调试演示过程，请点击链接

更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：

VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发相关推荐

EA出品的java射击类游戏,盘点五款射击类RPG游戏：你喜欢这类型游戏吗?
盘点五款射击类RPG游戏:你喜欢这类型游戏吗? 2020-06-04 18:04:06 3点赞 10收藏 3评论 RPG这种类型的游戏有很多,也是有许多玩家的喜欢.说到射击类型与RPG相结合的游戏,不 ...
极乐迪斯科for Mac(侦探类RPG游戏)中文版
极乐迪斯科Disco Elysium for Mac是一款很好玩的侦探类RPG游戏,在Disco Elysium汉化版中,玩家将扮演一个落魄潦倒的中尉侦探,身处堕落的港口城市雷瓦科城,你将要用属于自己 ...
游戏理论研究四：RPG游戏
游戏理论研究四(转)RPG游戏- - 作者:hitman 4．RPG游戏 RPG游戏 (角色扮演类游戏)无疑是最受欢迎的游戏类型.但很难对其进行确切定义 .本文采取用其性质或者说其构成要素来定 ...
游戏理论研究四(转)RPG游戏
4．RPG游戏 RPG游戏 (角色扮演类游戏)无疑是最受欢迎的游戏类型.但很难对其进行确切定义 .本文采取用其性质或者说其构成要素来定义其本身的方法,在阐述了下述问题之后, 对RPG游戏的定义问题也就 ...
《触摸屏游戏设计》——4.2节游戏需要故事……不是么？
本节书摘来自异步社区<触摸屏游戏设计>一书中的第4章,第4.2节游戏需要故事--不是么?,作者 [美]Scott Rogers,更多章节内容可以访问云栖社区"异步社区" ...
Unity3D 游戏引擎之构建简单的游戏世界（三）
Unity3D 游戏引擎之构建简单的游戏世界雨松MOMO原创文章如转载,请注明:转载至我的独立域名博客雨松MOMO程序研究院,原文地址:http://www.xuanyusong.com/archi ...
51单片机系列（三）51 单片机游戏设计 —— 双人对战小游戏（石头剪刀布）
本博客51单片机实训系列,旨在记录本人在大学上单片机技术这门课时所做的课程实训内容,并与大家分享基于51单片的课程作业,如果作业中的某些细节和代码能给大家一点启发那就更好了,希望大家能用51单片机做出 ...
Silverlight游戏设计(Game Design)：(一)游戏中斜视角的原理与分析
"暗黑破坏神3"将采用45度斜视角设置这篇数月前貌似毫不起眼的新闻一直让我记忆深刻,不断的尝试去理解大师级的暗黑团队为何放弃目前主流的纯3D路线而回归到类2D,B大的一句话道破天机 ...
《通关！游戏设计之道》给游戏编个故事
<求生之路>里采用了一种被称为"导演"的人工智能来控制游戏的节奏.它会根据玩家的生命值.游戏技巧以及位置等多种变量汇总出玩家的"压力等级",然后再根 ...

VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发

VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发相关推荐

最新文章

热门文章