Quantcast
Channel: 英特尔开发人员专区文章
Viewing all articles
Browse latest Browse all 583

如何使用英特尔® XDK 的 Game Asset Manager

$
0
0

英特尔® XDK提供的开发环境允许您创建2D画面的HTML5游戏。它包含一个 Game Asset Manager (游戏资源管理器),游戏相关的插件 API,游戏样例和模板,代码编辑器内建的自动补全功能等等,同时也包括许多标准的HTML5开发功能。
若想了解如何使用XDK开发游戏应用,请查看《英特尔XDK HTML5游戏开发入门》。

概览

英特尔XDK自带的 Game Asset Manager 提供了一个集中的地方来查看游戏资源文件。通过它为选定的asset生成代码片段,您可以扩展您的 HTML5/JavaScript/CSS 游戏资源。代码片段是由游戏引擎和版本决定的,因此在创建新项目时你必须选择游戏引擎类型和版本。
Game Asset Manager 会扫描并渲染原文件目录asset文件夹,比如 www/asset 下所有已支持的文件类型,以方便审查元素。如果添加、删除了asset下的文件或子文件夹,Game Asset Manager 将会自动更新。
看看这个视频来了解如何使用 Game Asset Manager:http://v.youku.com/v_show/id_212985759.html

Game Asset Manager

创建一个游戏项目之后, Develop 标签页的最左侧将会出现 Game Asset Manager 面板,它显示了一个和该项目相关的树状文件目录:

点击  以在可视化状态和源码模式之间显示(切换)
点击  或  以显示、隐藏 Game Asset Manager 面板.
点击 Name 或 Type 以名称和类型对文件升序、降序进行整理。
点击 Import Assets 在文件系统中查看该项目的 asset 目录,同时也显示新添加文件的说明。

对导入包含大量Asset文件的项目的一些建议:

某些项目包含大量asset文件。 为了帮助您将本地文件关联到 Game Asset Manager 树目录:
  • 向下滑动滚动条
  • 以文件名称或类型对文件进行整理 (见  )
  • 搜索一个指定的文件名。 (见  )


在 Game Asset Manager 的树目录下查看动画渲染窗口

在 Game Asset Manager 树目录下, 点击一个asset文件可显示预览窗口。
对于置放在asset目录下的文件,如动画和 sprite sheets 将会被渲染并以连续的动作显示在预览窗口中,其他静态图片或为其他asset定义的动画文件也会显示预览窗口,但不会显示连贯的动画,例如某个为其他asset定义的动画的。所以你需要选择正确的asset文件来呈现,如使用armature或spritesheet的动画。您可以使用相册视图展开并审查一个asset文件,也可以查看asset文件包含的动画。
预览窗口底部的按钮释义:

  •  - 查看该asset文件的代码片段。
  •  - 将该asset文件的代码片段拷贝至剪切板。
 
如图所示: 
 
 

使用 Game Asset Manager 缩略图视图

点击  按钮以相册的方式显示 assets 文件的预览图 (如下图所示)。在这种视图下,您可以浏览并预览你的asset文件,查看并拷贝代码片段,查看详细信息,生成相关的功能。

 
若需要编辑源代码,再次点击  切换到内置的代码编辑器(或是你最常用的代码编辑器)。
使用水平滚动条(最底部)或鼠标滚轮浏览asset文件。滚动时请留意缩略图,有些预览窗格显示的是静态图片,有些是图片集合加一个播放按钮,如图:
 
 
 
一些asset只包含一个静态图像,另一些则可以显示或定义一段动画,所以你需要去选择能够渲染这个动画的asset文件。例如,plist文件通常定义了某个asset文件的动画,但其本身并不包含动画。总的来说,一些asset文件可能是被其他asset文件显示或定义的,因此你需要选择正确的asset文件来呈现,比如那些使用armature或spritesheet的asset文件。
 
在相册视图下展开并审查一个Asset元素
您可以检查和测试某些包含或定义了动画的预览窗格,或查看不提供动画的静态和类似的asset文件。要展开预览窗格,点击该窗格顶部的工具栏,比如文件名。 若是非静态的asset文件,这个工具栏将由最左侧的图标(例如 ),文件名,展开按钮  和关闭按钮组成。

 

展开后如下图:
 
 
展开后的预览窗口底部有三个按钮:
  •  - 显示或隐藏网格背景。若是包含动画的asset文件,这个按钮将由重新载入按钮 替换。
  •  - 查看该asset文件的代码片段。
  •  - 将该asset文件的代码片段拷贝至剪切板。
若要隐藏一个asset预览窗口, 点击窗口最右侧的关闭按钮 。在展开视图中,您可以点击顶部工具栏将asset文件缩小为缩略图。要重新在相册视图中显示已经隐藏的asset文件,在文件树面板上点击眼睛图标按钮即可。例如,如果您之前隐藏过一个asset文件 p.png,单击d.png文件名左侧的眼睛就能在相册视图中重新显示:
 
 

预览动画

在缩略图或展开视图下,将鼠标箭头悬停在一段动画或spritesheet文件的播放按钮上,您可以以查看其动画。播放按钮的背景变成蓝色就表示动画要开始了。如图:
 
 
在展开视图下,您可以使用 按钮重新加载asset文件。
 

显示Asset文件子条目的详细信息

要在一个spritesheet文件或asset定义文件里查看子项的详细属性,单击或将鼠标指针悬停在子项上以查看其数据提示。如图:
 
 
Asset文件子项目展开视图的详细信息取决于asset文件的类型。对于动画,每一帧图像都将出现在实际的动画中。对于spritesheet(如上图所示),将您的鼠标停留在一个子项上将显示其详细信息(如文件名、矩形坐标和旋转方向)。对于位图字体,界面中将出现一个空白场地,允许你输入文字,文字将以该位图字体的样式呈现。
 

使用代码片段

 
当新建了一个XDK游戏项目,您可使用模板或示例应用开始,也可导入已有的游戏项目。只有某些游戏引擎和版本允许生成代码片段,这是由游戏引擎和版本决定的。
代码片段提供通用的指南 并包含有用的注释。 拷贝()一个代码片段,并粘贴到JavaScript文件中某个合适的位置,
按照注释中的说明编辑代码片段,以及现有的源代码。一些注释行包括一个TODO字符串来提醒你需要修改哪一部分代码。在设备模拟器(Emulate选项卡)中预览asset文件,以确保其可以正常运行。
点击Game Asset Manager右上角的 按钮可在代码视图与Game Asset Manager视图之间切换。
 
要观看 Game Asset Manager 使用视频,请查看上文中的“概览”部分。
要获取入门使用教程,请阅览《英特尔XDKHTML5游戏开发入门》。要了解已支持的游戏引擎版本列表,请参阅英特尔XDK的发行说明
 

附录:常见的 Game Asset Manager 文件类型

Game Asset Manager 文件包括:

类别:

文件扩展名:

  • Spritesheet: 一系列集成在一起的小图片。
.plist .xlm
  • Particles: 营造像爆炸、极光这样的特殊效果。
.plist
  • Spritesheet 动画: 简单但十分常见的动画形式。
.plist .xlm
  • Cocos2D armature animation
.ExportJSON .json .xml
  • Cocos2D 图形界面: 可被 HTML5 canvas 上的某个按钮调用。
.json
  • Cocos2D 场景: 场景由原画师创作并可通过一行代码调用。 
.json
  • TMX Tile Map (背景图)
 
  • Bitmap 字体: 以字体形式显示不被浏览器和运行时支持的字符, 每个字符将以图片形式集合在一起供调用。
.fnt
  • 原始 PNG 文件: 静态显示。
.png

 

其他资料

 

您还可以阅读原文或点击下面的链接获取更多内容:


关注英特尔XDK官方微博 http://weibo.com/xdktool 即时了解我们的信息,或扫一扫下面的二维码关注我们的微信账号:


Viewing all articles
Browse latest Browse all 583

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>