原文：http://bostongamejams.com/akihabara-tutorials/akihabara-tutorial-part-4-5-interlude/

Akihabara 指南，第四个半部分：迁移

Darius Kazemi 编写于 2010 年 07 月 21 日

这是系列指南的第四部分向第五部分过渡的内容，我们将向你演示如何使用基于 HTML5 和 JavaScript 的 Akihabara 框架来编写 8 向射击游戏。Akihabara 是一个利用 HTML5 功能帮助创建游戏的 Javascript 库。使用 HTML5 编写游戏最棒的事情是你可以在任何平台、任何支持 HTML5 的浏览器运行它。这包括 Chrome，Firefox，Safari 和 iPhone/iPad，WebOS 设备上的 WebKit 浏览器，或者其他移动平台。

在这一部分主要涵盖了一些游戏路线上的重要调整。

在这部分中，我们将扩大游戏的分辨率到 640×480，修改地图瓦片的分辨率为 16×16，移除摄影机的代码，并且创建帧计数器。

成品

这部分的最终制品应该像这样。我们调整地图的分辨率调整为原先的两倍，所以瓦片变成 16×16。这并没有什么让人激动的，只是让接下来的路好走一些。

重要提示

如果你于六月1日之间前，就开始阅读 Akihabara 指南，你需要更新 Akihabara 到 1.2.1 版本。下载这个版本，并且用这个版本替换你游戏的核心 *.js 文件。这个指南将不再支持之前的 Akihabara 版本。这里我们不会探究细节，不过 1.2.1 提供了多个 bug 的修复，改进了已有的功能，并且添加了用于音效和音乐的声音支持！

修改分辨率

我们对游戏的设计进行了一些思考，决定用一个高分辨率的固定地图来代替摄影机和卷动的地图。Akihabara 默认游戏显示在 640×480 大小的画布上，但是游戏本身放大了两倍，渲染在 320×240 的视图上。这让游戏的像素一格一格的，看起来像古老的 NES 游戏。我们考虑用显示完整的地图来代替，在 40 瓦片高，30 瓦片高的情况下，640×480 像素得到瓦片尺寸为 16×16。接下来要做的就是切换 320×240 两倍放大到 640×480 原尺寸。

为了实现这个，我们需要重写 help.akihabaraInit 函数的一些变量，它的第一个参数接受含有重写变量的对象。所以，我们在 loadResources 顶部，替换旧的 help.akihabaraInit 调用，像下面这样：

	function loadResources() {
	  // 我们传递重写“title”，“分辨率”，“缩放级别”的变量到 help.akihabaraInit
	  help.akihabaraInit({
	    title: '8by5',
	    width: 640,
	    height: 480,
	    zoom: 1
	    });

如果你现在运行这个程序，你会发现分辨率已经改变，因此我们可以在屏幕上看到整个地图！

改变地图的瓦片

在接下来的指南中，我们将放置敌人并为其建立简单的人工智能。我们希望保持敌人的寻路代码（这些代码告诉敌人如何在障碍物中移动）越简单越好。为了达到这个目的，地图瓦片的尺寸必须和敌人对象的尺寸相等。玩家是 16×16，所以敌人也是 16×16，也就是说地图的瓦片同样必须是16×16。

首先要将地图瓦片的图像尺寸扩大到原来的两倍。下载新的修改过尺寸的 map_pieces.png 并替换原先那个。

然后我们告诉 Akihabara 新的地图瓦片的尺寸是 16×16。为了做到这个，更新 gbox.addTiles 调用：

	gbox.addTiles({
	    id:      'map_pieces',
	    image:   'map_spritesheet',
	    tileh:   16,  // 4.5 部分：修改地图瓦片尺寸
	    tilew:   16,  // 4.5 部分：修改地图瓦片尺寸
	    tilerow: 1,
	    gapx:    0,
	    gapy:    0
	  });

我们改变了 tileh 和 tilew 为 16 像素。如果你现在运行程序，你会看到这样创建了一个非常大的地图，和玩家的开始的位置重叠，让我们永远陷入石头不能动弹。这不会真正发生。我们现在要做的是缩小地图到一半的尺寸，实际上，就是替换墙的瓦片从 2×2 到只有一块。我们的 loadMap 函数变为这样：

	function loadMap() {
	  return help.asciiArtToMap([
	"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
	"x                  xx                  x",
	"x                  xx                  x",
	"xxxxxxxx      x    xx                  x",
	"x             x    xxxxxxxxxx          x",
	"x             x                        x",
	"x             x                        x",
	"x     xxxx  xxxxxxxxx           xxxxxxxx",
	"x                  xx                  x",
	"x                  xx                  x",
	"xxxx               xx                  x",
	"x      xxxxxxxxx   xx                  x",
	"x                  xx                  x",
	"x                  xx        x         x",
	"xxxxxxx  xxxxxxxxxxxx        x         x",
	"xxxxxxx  xxxxxxxxxxxx        x         x",
	"x                  xx      xxxx        x",
	"x                  xx        x         x",
	"xxxxxxxx      x    xx        x         x",
	"x             x    xx                  x",
	"x             x    xx                  x",
	"x             x    xx                  x",
	"x     xxxx  xxxxxxxxx                  x",
	"x                  xx                  x",
	"xxxx                                   x",
	"x                                      x",
	"x      xxxxxxxxx   xx                  x",
	"x                  xx                  x",
	"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
	    ], [ [null, ' '], [0, 'x'] ])
	}

如果你现在执行程序，你会得到一个可以移动的好看的地图。

屏蔽摄像机

由于现在我们可以在屏幕上看到整个地图，我们不再需要卷动的摄影机。让我们彻底屏蔽摄影机，完全删除 followCamera 函数和 addMap 中的 followCamera 调用，所以看起来像这样：

	// 这是用于添加地图对象的函数——以确保游戏主要代码优质且简明
	// 在第四部分，我们添加了这里你看到的“followCamera”那行
	function addMap() {
	  gbox.addObject({
	    id:    'background_id', // 这是对象 ID
	    group: 'background',    // 我们使用之前‘setGroups’调用中创建的‘backround’组
	 
	    blit: function() {
	      gbox.blitFade(gbox.getBufferContext(), { alpha: 1 });
	      gbox.blit(gbox.getBufferContext(), gbox.getCanvas('map_canvas'), { dx: 0, dy: 0, dw: gbox.getCanvas('map_canvas').width, dh: gbox.getCanvas('map_canvas').height, sourcecamera: true });
	    }
	  });
	}

添加帧计数器

帧计数器是一个全局变量，用于在游戏开始后统计帧的数量。帧计数器在各种各样的情况下都是很有用的，包括跟踪动画的长度或者调节运算的密度，例如运算可能每10帧才执行一次，而不是每帧一次。这实现起来很简单：设置一个全局变量为 0，并且在每一帧都使其加一。唯一棘手的是需要考虑什么时候增加它。

回顾一下，‘background’组是第一个被渲染/计算的。地图是当前 background 组中唯一的对象，所以我们增加帧计数器在它的 first 函数中。这样帧计数器就在这帧的第一个对象被计算时立刻增加了数值。

首先，在代码的最前面声明一个全局变量 frameCount，初始化为 0，跟另外两个全局变量 map 和 maingame 放在一起：

	  <script>
	var maingame;
	var map;
	var frameCount = 0; // 4.5 部分新增

然后，我们在 addMap 中添加 first 函数：

	// 这是用于添加地图对象的函数——以确保游戏主要代码优质且简明
	// 在第四部分，我们添加了这里你看到的“followCamera”那行
	function addMap() {
	  gbox.addObject({
	    id:    'background_id', // 这是对象 ID
	    group: 'background',    // 我们使用之前‘setGroups’调用中创建的‘backround’组
	 
	    // 帧计数器在地图中进行处理
	    first: function() {
	      frameCount++;
	    },
	 
	    blit: function() {
	      gbox.blitFade(gbox.getBufferContext(), { alpha: 1 });
	      gbox.blit(gbox.getBufferContext(), gbox.getCanvas('map_canvas'), { dx: 0, dy: 0, dw: gbox.getCanvas('map_canvas').width, dh: gbox.getCanvas('map_canvas').height, sourcecamera: true });
	    }
	  });
	}

我们所做的一切只是在 first 函数中增加 frameCount。这样，我们有了一个在每帧开始都增加的全局的帧计数器。

不需要什么回报，不过你很快会感谢我们……

我们知道，在这部分指南中没有做很多的内容，但是这将帮助我们在接下来开始放置动画并修改游戏的设计。你可以在这里看到完整的程序。

Akihabara 指南目录