top of page

将您自己的智能手机变成
无线游戏手柄

​化身为一新生的精灵胎儿在风格化的幻想世界中奔跑和飞翔,倚靠搜寻来的仙灵同伴们提供的活力和防御能量完成这“诞生”的旅程。

​《新生儿》是一款以探讨生命的诞生为主题的第三人称视角艺术冒险游戏,为中国传媒大学动画与数字艺术学院游戏设计系2011级本科毕业设计众多作品之一,由廖晟、石磊和吴瑞鑫三人历时一年共同开发完成。为在此互动艺术作品中传达生命之初的绚丽多姿,开发者们将游戏目标设定成扮演一精灵新生儿在一个充满象征图形符号的虚拟世界里探索脱离母体的途径。玩家需操控主角在平静湖面上身轻如燕地奔走,在黑暗峡谷间抵抗恶灵的入侵,历经险阻后奔向倾泻而下的瑰丽瀑布并凌空跃过其顶,最终飞向远方泛着朦胧橙光的巨型“太阳”。

该游戏的机制/操作方式被设定成手持通过无线局域网络技术连接到个人电脑的移动设备(智能手机),运用设备自带的加速度计(重力感应器)来远程操控运行在电脑服务器中的虚拟角色的移动,并用常见的诸如滑动、按压等触摸屏设备手势来向角色发送跳跃或飞行等移动命令。

体裁

艺术

冒险

网络

所用技术

触摸屏/加速度计(移动设备)

Unity3D 游戏引擎

TCP/IP

本人职责

工程师

技术美术支持

共同设计师

成员贡献

  • 原创的角色、精灵生物及场景美术概念设定由吴瑞鑫绘制完成

  • 三维角色及场景物件的建模和手绘贴图由吴瑞鑫完成

  • 风格化天空盒的绘制、场景搭建的美术指导及宣传片的剪辑由吴瑞鑫完成

  • 双屏交互概念和流程设计及用户界面设计由石磊完成

  • 详细的带有交互状态转换示意图及地形等高线图的设计文档由石磊绘制编写完成

  • 角色骨骼绑定、角色各状态关键帧动画及摄像机移动分解动画由石磊制作完成

本人贡献

  • 积极地与两位美术/设计组员沟通,充分理解项目设计点并实现机制的核心功能以用作项目进程的技术展示。

  • 作为项目的唯一程序,独自研究、实现、调试和测试项目的网络通信、用户输入、游戏人工智能及镜头切换功能模块。

  • 负责编码整个游戏系统组件和流程玩法逻辑。

  • 编写U3D引擎内编辑器插件和游戏管理器脚本用以组织和整理项目用到的美术资源。

  • 通过编写或者修改着色器(shaders)制定材质来协助项目美术实现令其满意的视觉表现风格,同时减轻其工作负担。

  • 负责项目工程的管理和该产品最终呈现给试玩者的品质表现。

Newborn - Trailer (2015 Indie Game)

Newborn - Trailer (2015 Indie Game)

播放影片
产品特性
将智能手机用作第二块展示屏幕和无线游戏手柄的独特设计

我们试图通过此毕设项目来探索一种更加直观、有趣且不需要额外的花费于外部设备上的交互方式。通过无线局域网技术将您的智能手机连接到个人电脑上,您可以运用移动设备的重力感应器来控制游戏角色的运动,并运用多种触摸屏控制手势来与显示在电脑和手机两块屏幕上的视觉元素进行互动。

经典叙事结构和实时电影镜头转场系统

此游戏的流程设计基于三幕剧叙事结构及心流理论,意图提供给玩家情感上的跌宕起伏。在这个色彩梦幻且充满隐喻的母体世界里,您将扮演一位新生的精灵漫步于平静的湖面,横穿阴森可怖且游荡着恶灵的峡谷,最终凌空飞跃雄伟瑰丽的大瀑布。

运用定制的着色器/材质呈现类似卡通渲染的低纯度梦幻柔美画面

​得益于项目工程师和艺术家之间相互沟通、妥协和合作,我们创造性地运用有限掌握的可编程管线技术及无限的想象力来呈现令人惊叹的艺术表现风格。柔和醇厚的蓝紫色调及简约的用户界面设计共同营造了生命诞生之初的恬静美好氛围。

技术难点 1:双屏交互

​Game consoles such as Nintendo DS or some experimental hardware interactive devices utilize the dual screens to expand view-able areas of the virtual contents; Others like Sony Dualshock or Nintendo Wii Remote offer motion sensor available for gesture controls. Our design and implementation, nevertheless, combine these two in the equipment most people have.  The dual screens module codes establish the client-side application on an android portable device and the server side on a networked computer, analyzing and transferring the user input data for smooth character navigation or remotely calling functions(by Remote Procedure Call protocol) to synchronize game events. This special input module was iterated thoroughly for its usability to avoid it descending to a gaudy technical feature.

A GIF demonstrating the wifi connection implemented through Unity 4.6 built-in network component.
A video clip to demonstrate the Wifi connection procedure between a Samsung Galaxy J7 smartphone and a gaming laptop

Besides the navigation functionality of the mobile device, two other game events require the player taking action on the touch screen to make progress. Whenever the infant character enters a mushroom-shaped construction and stands in front of the obelisk inside, stars fade in on the smartphone waiting to be connected through dragging and forming lines among these dots. Moreover, the failure of defense from the fairy companions results in enemies' incursion into the infant's internal body and being transferred onto the mobile phone screen. The infant will stay paralysed till the player drags them out.

An illustration to clarify the interactions on the mobile phone/controller; Image from the game design document written by Lei Shi

​The diagram on the left side illustrates the mapping of the user input to the character locomotion or the triggers of game events. Listed below are the avatar's responds:

  • ① Tilt the smartphone from facing the player more than 45° angle forward to move the character forward.​ The pitch angle controls the walking/running switch.

  • ② and ③ Tilt the smartphone left or right while the phone is more than 45° angle forward to make the character veer. The roll angles controls the turning velocity.

  • ④ Tilt the smartphone from facing the player less than 45° angle to smoothly rotate the camera till looking upward.

  • ⑤ Swipe using the two thumbs upward to render the character jump, then if the player ⑥ presses the two fingers on the screen before the character falls down, it will fly.

  • ⑩ Swipe using the two thumbs downward while it is falling to force the character to slump.

An illustration to clarify the interactions on the mobile phone/controller; Image from the game design document written by Lei Shi
技术难点2:游戏人工智能行为

Flocking around the infant character are game Artificial Intelligent (not real AI but several Computer Graphics algorithms) agents(boids) with the notable "Steering Behaviors" guiding their manner of movement. Combined with simple visual sensor modules, as visualized as the yellow antennae scanning unceasingly, and finite state machines, those creatures will protect the game hero whenever they detected the enemies trying to attack and intrude into its body. 

The video clips on the right side display the behaviors of a single agent in the flock. The algorithms I adapted for agents in three-D space are similar to the traditional two-D ones while being more complex. The agent uses three visual antennae constantly altering directions for perceiving its surroundings and its target position is visualized as the yellow jittering sphere gizmos.

Newborn - Technical Illustration - AI Steering 3D

Newborn - Technical Illustration - AI Steering 3D

播放影片
A draft of the imagined combat scene for Newborn, drawn by Ruixin (River) Wu
Newborn - Technical Illustration - AI Steering 2D

Newborn - Technical Illustration - AI Steering 2D

播放影片
A draft of the imagined combat scene for Newborn drawn by Ruixin (River) Wu
技术难点3:摄像机控制与实时镜头叙事系统

One of the common issues every interactive three-D graphics programmer has to deal with is the camera movement. It can be a rather frustrating task especially for the third person perspective. It is not at all that simple to lazily put the camera as a child of the character transform in the hierarchy, cause it renders the camera movement rigid and mechanical. My method to handle this is to pre-establish the target transforms of the camera as the "key points" for shooting the character turning, flying, falling, or looking upward and let the camera smoothly truck and pan into position. Moreover, ideally the virtual camera should never go through solid substances and breaks the immersion of the game. Thus a ray shot out from the pivot of the virtual camera detects every frame the position to replace the camera, once it collides with objects in the scene. Unlike the Unreal engine which offers the self-contained Spring Arm component satisfying the need, I had to write camera control scripts that cooperate with all other codes to implement the functionality in Unity 4.6.1.

A GIF demonstrating the smooth transition from a real-time third-person camera to cut-scene camera with predefined track.
A GIF demonstrating the smooth transition from the real-time third-person camera to a cut-scene camera with predefined track
A GIF demonstrating the smooth transition from a cut-scene camera with predefined track back to a real-time third-person camera

On the other side, the narrative ​part of the Newborn requires there to be real-time cut-scenes as lots of other games do. The switch among the main camera and the cut-scene cameras of various movement tracks takes amount of tricky codes to work. Nonetheless, the real challenge back then was how to maintain the consistency of the protagonist' position and orientation. We wanted the transitions to be seamless, though in some shots such as the one the hero flying onto the grand waterfall as the lower GIF shows, the character's body moved into a total different space. The camera, nevertheless, does not abruptly cut after the cut-scene starts or ends. My method to handle this is to use an procedural-animated "sand-in" as the code snippets illustrate, which takes place of the controllable protagonist during the cut-scenes so the camera seemly shoots at the same actor. These seamless transitions compensate for the breaking-up feeling of the gameplay.

A code snippet showing the functions that replace the controllable character with an non-player-character/actor with the same model.
A GIF demonstrating the smooth transition from a cut-scene camera with predefined track back to the real-time third-person camera
bottom of page