做Flash游戏物品栏不难

做Flash游戏时，物品栏是绕不开的模块，尤其是RPG或者生存类的小游戏，背包系统几乎天天都在用。我最早做这个的时候也犯过怵，觉得拖拽、堆叠、存档全都凑在一起很复杂，实际上把思路捋顺，一个下午就能写出一个能用的版本。今天就把我折腾出来的方法直接摆出来，你照着试，基本不会走弯路。

核心其实特别简单，物品栏本质上就是一个数组。你维护一个数组，数组里每个元素代表一个格子，元素本身是个对象，里面存着物品ID、名称、图标、数量这些字段。比如在AS3里这样写：

```actionscript
　　var bag:Array = [];
　　var bagSize:int = 30;

for (var i:int = 0; i < bagSize; i++) {
　　 bag.push({id:0, name:"", icon:null, count:0});
　　}
　　```

这个数组就是你的背包数据模型，格子背景、图标显示、数字、甚至拖拽交换，全都围绕这个数组来。UI只是把数组的内容画出来，改数据的时候刷新UI，两者同步就行。

UI摆放也没啥玄乎的。你做一个Sprite当作背包容器，然后设定格子尺寸和间距。我通常用48x48像素的格子，间距4像素。如果一行放6个，那起始x坐标从10开始，每个格子的x就是10 + (i % 6) * (48 + 4)，y就是10 + int(i / 6) * (48 + 4)。循环生成背景色块，颜色用0x333333，边框用0x666666，看起来就是个很标准的背包。

显示物品图标时，别把图标直接嵌在格子里，最好在格子里放一个空的MovieClip当挂载点。每次刷新，你检查当前格子的数据，如果count大于0，就把这个挂载点的visible设为true，然后给它绑定对应的图形。图形来源可以是库里的一个MovieClip，也可以是外部加载的位图。我习惯用一个Dictionary把物品ID映射到图形类，这样查起来比挨个if判断快得多，代码也不乱。

拖拽功能是最多人问的，其实做法很直接。你给每个格子装一个MouseDown监听，按下时把当前格子的数据存到一个临时变量里，同时把这个格子的图标复制一份，设成半透明，跟着鼠标移动。鼠标抬起时，先判断当前位置落在哪个格子上，可以用一个简单的方法：把鼠标坐标转换到背包容器的本地坐标，然后除以(格子宽度+间距)，取整得到行列号，再换算成数组下标。如果目标下标有效，就交换这两个格子里的数据，然后调用一次刷新函数，把整个背包重新画一遍。

这里有个关键点我一直提醒自己：所有修改物品栏的操作，比如拾取、使用、删除、交换，最终都归到一条刷新函数上。这个函数根据当前数组内容，重置所有格子的图标和数量。这样你做任何操作，只要改完数据后调它，UI就绝对不会乱。

物品堆叠也挺好处理。每个数据对象里的count就是堆叠数量，我一般设上限99。拾取同类物品时，先遍历现有格子，看有没有同ID且count小于99的，有的话就把多出来的数量加上去，超过99的部分再另找空格放。如果都满了，就弹个提示说背包满了。使用物品就把count减一，减到0就把该格子的id设回0，name清空，图标设为null，然后刷新。

存档是另一个容易忽略的地方。Flash游戏通常用SharedObject保存进度，但SharedObject对复杂对象支持有限，不能直接存自定义类实例。解决办法是把bag数组转成简单对象，比如用ByteArray序列化。我常用的写法是：

```actionscript
　　var byteArray:ByteArray = new ByteArray();
　　byteArray.writeObject(bag);
　　sharedObject.data.bag = byteArray;
　　sharedObject.flush();
　　```

读档的时候再反过来，readObject之后强制类型转换。这样数据怎么存进去就怎么取出来，不会丢字段。

性能方面我踩过一个坑：刷新函数如果每次都removeChild再addChild所有格子，在物品多的时候会卡顿，尤其连续拖拽时特别明显。后来改成在初始化时就把所有格子的背景和挂载点创建好，刷新时只改visible、改变图标的graphic或者texture，再更新一下数量文本，速度立刻就上去了。30格背包感觉和静态界面没区别，哪怕开到120格，帧率也稳得很。

还有一个细节，物品栏打开的时候，最好把游戏主循环暂停掉。不然你拖着一个药瓶，背后怪物还在追你，键盘操作会不小心触发别的逻辑，很烦。我用一个paused标志，背包打开时设为true，主循环里所有角色更新逻辑都跳过。

关于右键操作，Flash默认点右键会弹菜单，你得先隐藏它。在AS3里写：

```actionscript
　　var menu:ContextMenu = new ContextMenu();
　　menu.hideBuiltInItems();
　　this.contextMenu = menu;
　　```

然后给格子监听MouseEvent.RIGHT_CLICK，就能实现右键拆分数量、直接使用或者装备之类的功能。注意Flash的右键事件在浏览器里兼容性还行，但在某些播放器版本上会有小问题，最好同时提供双击使用作为备选。

说了这么多，总结起来就一句话：数据结构用数组，刷新UI靠一个函数，拖拽本质是交换数组元素，存档用SharedObject加ByteArray。别把问题复杂化。你只要先做个5格的小背包，把基础流程跑通，再往上面加需求就很自然了。动手写一遍绝对比看十遍教程有用。希望这些经验能让你少走弯路。