作为万代南梦宫娱乐的偶像养成游戏【偶像大师】的派生作品,是由Mobage创作的【偶像大师 灰姑娘女孩】。这个游戏的最新作品,是现在累计下载突破1200万的大作,Android/iOS平台的【偶像大师 灰姑娘女孩 星光舞台 】。
 
    在CEDEC 2016上,由负责开发的Cygames进行了关于【星光舞台】的制作示例讲解。本稿中,是【美术篇】和【技术篇】的两个演讲篇中,以【美术篇】为中心介绍的(译注:技术篇在另外一篇分享)。登场的是Cygames设计部的3DCG美术组经理谷本裕馬氏,Cygames设计部UI设计组经理中村ふじ子氏
 
 
Cygames设计部的3DCG美术组经理谷本裕馬氏
 
Cygames设计部UI设计组经理中村ふじ子氏
 
【偶像大师 灰姑娘女孩 星光舞台】的介绍视频

可爱,自然外表的3D偶像制作方法

 
 
从2D插图到3DCG
 
    【星光舞台】的最初命题是,把【灰姑娘女孩】上登场的2D插图的偶像,用【3DCG来再现】。
 
    本作是3DCG来表现的偶像们的乐曲和舞蹈为最大看点,即便是在手机上也没有问题的动作,和稳定和可爱的外观来摸索规格的结果是,头部约4000多边形,身体约7000多边形,纹理方面,头部和身体是1024x1024,在手机游戏里是相当极限了,用可以比得到PS3的规格来制作。(译注:这种规格下,在移动平台还是实现了60FPS的流畅体验,具体实现请看后面的技术篇)
    另外在图形方面,为了可以再现2D插图,做了轮廓线的表现。显示方式是【一般的】,是把沿着发线方向挤出模型进行反转的方法。不过轮廓线使用的网格模型上会适用角色的纹理,这样会反映到轮廓线的颜色上(比如皮肤是茶色,衣服是淡蓝色),完成的效果看起来更加自然。
    当初发布的有60多人的偶像们的3D模型种类,虽然”本来是想1个1个的来制作“  ,但规格和容量不允许,所以把身高分为S/M/L/LL,胸围分成S/M/L这样(另外还有体重和肤色),把各个偶像身体部分的按体形区别来共通化。但是身高LL只有诸星琪拉莉(182cm)适用,这样对制作的讲究超越合理性限制上也很有意思。
 
和PS3匹敌的规格上来调整
 
在轮廓线上的颜色反映,作出自然表现
 
身高差等是使用了通用化的数据,也有例外存在。
 
    由【灰姑娘女孩】的插画师监修的偶像们的表形,从【普通的脸】到【难受】,【笑容】等,准备了6种,每个偶像还加入了不同的【特殊表情】。
【特殊表情】是反映各偶像魅力的表情,城ヶ崎莉嘉的眼里闪着星星,森久保乃々是视线躲避着摄像机,星輝子的紧张感提升后的阴气表情的【ヒャッハー颜】(这个搜下卡牌看下就知道了)等等。特别是星輝子是获得SSR后会经常变成特殊表情的特殊处理。"头部的数据是2个,消耗也是两倍了。。"谷本氏是半开玩笑的发着牢骚。
 
关于表情方面,准备各种特殊表情是首要的
 
城ヶ崎莉嘉的星星眼
 
森久保乃々视线躲避着摄像机
 
偶像们的表情,星輝子是其中的特例【ヒャッハー颜】
 
附:SSR星輝子的【ヒャッハー颜】的会经常出现
 
    还有乐曲的口型对应( Lip Synch)上准备了【あいうえお】+【ん】的日文元音和无音的大小各两个种模式。正因为这些的使用,表情有张驰,有更加自然的感觉。另外没有歌词时用的【笑颜】也有口型。
    舞蹈方面,舞姿是使用动作捕捉,而手部运动是手工制作来对应。实际的舞蹈场景中,全员使用了相同的数据,然后偏移时间轴的方式,避免机械的完全一样的动作,就好像活的偶像们一样跳出的真实舞蹈表现。
 
口的运动,舞蹈的差异,让舞蹈场景更加的自然
 
兼容绘制负荷和容量的考虑,手机上的观众和荧光棒的形状,用立体的多边形再现也很难判断到,所以荧光棒用板型多边形来表现。配合乐曲和时机,荧光棒的颜色也会变法。进一步加入了晃动的动画,再现了乐曲观众的特色。
 
Timeline工具,向工程师提出的要求,整理,开发了制作Live时必要的功能。 为了可以在时间轴上对应歌曲和舞蹈,制作了各种设定的专用工具,在项目初期就准备好并运用上了。
 
由插画师负责检查
 
其他各种讲究的地方的地方,得到监修插画师的反馈,再进行更新

对偶像的愛爆炸般来执着制作的事例介绍

   虽然前面也提到【制作的讲究超过了合理性限制】,在发布后也有很多的事例产生。
 
    例如,游戏策划那里听到了【无论如何依田芳乃也要穿着长袖和服!】的事例,那时因为规格已经到了极限,实现是不可能了,进行了处理的优化,降低了CPU的处理负荷,使得计算处理成为可能。另外 Cygames Research的软件工程师金井大氏【技术篇】讲到了处理的优化,后面会翻译分享。
 
    还有太田優胸部有痣的特征,发布不久痣因为身体数据的通用化无法实现,而被去掉了。这个问题,产品经理哪里“没有痣”的意见也来了。
    所以制作组是把之前只有白色/通常/褐色3个种类的肤色差分上,增加了太田優专用的【痣的差分】来对应。这样很好的在太田優的左胸上绘制了痣。
    另外,各个偶像的擅长眼睛的决定,用哪只眼睛来【眨眼】也是可以分别来设定,可以感觉到对偶像们制作的执着。
    本作到9月迎来了游戏的1周年,也包含了细节模型的修正,通常的资源刷新。最初看宣传片时还有着【有些吃力】的感觉,到再现也还是以这种压倒性的动机来继续运营着。1周年的新影像也被公开了,希望可以继续期待。
 
最初的配置依田芳乃的长袖是无法实现的,但是为了满足策划的要求,最发发布后进行了布料模拟的处理优化。优化处理除了降低了CPU的处理负荷,控制布料的骨骼数的配置也得到了扩展,这样增加了长袖可用的计算处理。
 
在最初表现中放弃的太田優的痣,发布后,产品经理告诉说“没有痣”。把体形配置的肤色做了区别,在【白色,通常,褐色】基础上增加了【痣的差分】。
 
【UI制作的事例】
   中村氏讲到的UI制作事例。UI是在【灰姑娘女孩】中就明确的,不能影响到偶像魅力的来设计。一边整理尺寸一边最小限度的制作部件,例如可以马上的对应紧急事件,变成画面上把图表做大来提升方便性等。
使用的部件,卡片和道具
使用的按钮部件
 
使用的Tab部件
 
初期制作的准备。
 
 
 

用3D再现2D偶像的可爱,Cygames【偶像大师 灰姑娘女孩】开发示例的更多相关文章

  1. 一种Flash页游前端3D转2D显示技术——PV2D, 颠覆传统吧!

    stage3D很强大,但是客户端硬件加速支持有限. 出来的图形锯齿严重,看上去和果冻一样. Stage3d不兼容2d模式. 总的来说,3D很美好,现实很残酷.但是3D有无可比拟的优势:那就是节省90% ...

  2. 基础篇:1)时代的发展与结构设计--3d与2d设计的变迁

    本章目的:机械设计需要追寻时代的脚步. 1.机械作图时代的划分 这张图是作者个人对机械作图发展的简单划分,并非哪个网站的数据.所以粗糙或错误请海涵. 2.2d作图时代 纯2d时代中,工程师开只绘制二维 ...

  3. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  4. HTML5的WebGL实现的3D和2D拓扑树

    在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...

  5. HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

    QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域.QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是 ...

  6. 强大的游戏开发工具Unity3D推出2D开发工具,unity将混合3D与2D开发

    2013 Unity全球开发者大会(Unite 2013)于2013年8月28日在温哥华隆重开幕,会上Unity全球CEO David Helgason在Keynote上宣布Unity 4.3版本即将 ...

  7. Unity工程3D和2D开发模式切换

    在新建工程时,经常会选择默认的3D工程,但是如果想做2D游戏又不小心选了3D工程呢,总不能把工程删了重新建吧,有个办法就是打开 Edit > Project Settings > Edit ...

  8. ISP图像调试工程师——3D和2D降噪(熟悉图像预处理和后处理技术)

    2D降噪:只在2维空间域上进行降噪处理.基本方法:对一个像素将其与周围像素平均,平均后噪声降低,但缺点是会造成画面模糊,特别是物体边缘部分.因此对这种算法的改进主要是进行边缘检测,边缘部分的像素不用来 ...

  9. [Unity] 3D数学基础 - 2D旋转矩阵

    2D矩阵的旋转: NewX = X * Cos(α) - Y * Sin(α) NewY = X * Sin(α) + Y * Cos(α) 一般在三角函数中使用的是弧度,我们可以通过下面的公式将角度 ...

随机推荐

  1. [BZOJ4408][Fjoi 2016]神秘数

    [BZOJ4408][Fjoi 2016]神秘数 试题描述 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数.例如S={1,1,1,4,13},1 = 12 = 1+13 = 1 ...

  2. C#基本工具代码

    1.下载Xlsx public static void TryToDisplayGeneratedFileXlsx(string writeFilePath, string fileName) { H ...

  3. ecshop商品子分类点击下拉,子分类空时,直接跳转功能

    模板文件循环读取商品分类,并给大分类加上url属性.然后在js中判断是否有下级分类.有分类则点击下拉效果,没有子分类则跳转到url属性的链接去. themes/**/library/category_ ...

  4. socket阻塞与非阻塞,同步与异步、I/O模型,select与poll、epoll比较

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步/异步主要针对C端: 同步:      所谓同步,就 ...

  5. Python之路,Day3 - Python基础3

    一.文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  6. mac下wifi无法连接的问题

    今天遇到了一个Wi-Fi打死连不上的问题,关闭重启电脑路由器都试了一下还是不行,最后把资源库/偏好设置/SystemConfiguration下的文件都删除,有一个是删不掉的,留着不影响,然后重启,O ...

  7. ping命令执行过程详解

    [TOC] ping命令执行过程详解 机器A ping 机器B 同一网段 ping通知系统建立一个固定格式的ICMP请求数据包 ICMP协议打包这个数据包和机器B的IP地址转交给IP协议层(一组后台运 ...

  8. LeetCode之404. Sum of Left Leaves

    ------------------------------------------------------------------- 分两种情况: 1.当前节点拥有左孩子并且左孩子是叶子节点:左孩子 ...

  9. Linux网络管理2---(网络环境查看命令、网络测试命令)

    1.网络环境查看命令 ifconfig命令 查看或临时修改网络状态的命令 可以看到IP.子网掩码……信息 关闭和启动网卡 ifdown 网卡设备名(比如: ifdown eth0):禁用该网卡设备 i ...

  10. APP切图标记PS的外挂神器-Assistor PS(转)

    目前APP设计师们对Assistor PS 可是好评连连,说是切图仔的福音或救星.确实是这样的. 与其他切图标记软件不同的是,Assistor PS 是完全独立于 PS 本身的,说是一个外挂更加合适, ...