技术报道 2025 ゲームメーカーズ
宝可梦卡牌Pocket的卡牌表现制作
Creatures与DeNA四位开发者讲述如何在保留纸卡魅力的同时,实现数字特有的卡牌表现。
摘要
Creatures与DeNA开发者介绍《Pokémon TCG Pocket》卡牌格式的制作流程,从概念设计、实现到监修,并以钻石、星、究极异兽等稀有度为例,讲解全息、视差、3D模型与大理石着色器等数字表现手法。
在保留宝可梦卡牌游戏原本魅力的同时,附加数字表现特有的魅力
本セッションに登壇したのは、クリーチャーズ アート開発部 部長 シニアアートディレクター 長屋 悟氏、そしてディー・エヌ・エーからはゲームサービス事業本部開発運営統括部第一技術部テクノロジー推進第一グループ ヴィジュアルエンジニア / テクニカルアーティスト 半田佑馬氏、同部 グラフィクスエンジニア 山本真史氏、ゲームサービス事業本部開発運営統括部デザイン部クリエイティブ第一グループ テクニカルアーティスト 廣田隆哉氏の計4氏。
登台本次会议的有Creatures美术开发部部长、高级美术总监长屋悟,以及来自DeNA的游戏服务事业本部开发运营统括部第一技术部技术推进第一组视觉工程师/技术美术半田佑马、同部图形工程师山本真史、游戏服务事业本部开发运营统括部设计部创意第一组技术美术广田隆哉,共4人。
右から順に、長屋 悟氏、半田佑馬氏、廣田隆哉氏、山本真史氏
从右至左依次为长屋悟、半田佑马、广田隆哉、山本真史
まずは長屋氏が『ポケポケ』以前からトレーディングカードゲームとして存在しているポケモンカードゲーム全体のコンセプトと、2024年にモバイルゲームとしてリリースされた『ポケポケ』のコンセプトを紹介しました。
首先,长屋介绍了作为集换式卡牌游戏在《Pokémon TCG Pocket》之前便已存在的宝可梦卡牌游戏的整体概念,以及2024年作为移动游戏上线的《Pokémon TCG Pocket》的概念。
集换式卡牌游戏宝可梦卡牌游戏的概念
ポケモンカードゲームは、ゲームソフト『ポケットモンスター』シリーズの世界をテーマにしたトレーディングカードゲームです。これまでに日本や北米、欧州を中心に90以上の国・地域で発売されており、全世界出荷枚数は750億枚以上に達するとのこと(2025年3月末時点)。
宝可梦卡牌游戏是以游戏软件《宝可梦》系列的世界为主题的集换式卡牌游戏。至今已在以日本、北美、欧洲为中心的90多个国家和地区发售,全球出货张数达到750亿张以上(截至2025年3月底)。
ヒットの要因は、対戦ゲームとしての楽しさとカードを集める楽しさを兼ね備えていること。
其热销的原因在于兼具作为对战游戏的乐趣与收集卡牌的乐趣。
対戦では60枚のカードで構成されるデッキを使い、カードの組み合わせによって戦略的な対戦を楽しむことができます。
对战中,玩家使用由60张卡牌构成的牌组,通过卡牌的组合享受具有战略性的对战。
世界中で大会が行われているため、対戦ゲームのイメージが強いかもしれませんが、コレクションも楽しめるプロダクトとしてしっかりと開発・デザインが施されています。
由于世界各地都在举办赛事,可能给人留下对战游戏印象较强,但它作为也能享受收集乐趣的产品,在开发与设计上得到了扎实的打磨。
コレクション性を高めるにあたっては、カードのレアリティごとにホログラムの種類や光り方、UV印刷といった特殊加工に変化を付けて、視覚的に各レア度の段階を演出しています。
在提升收藏性方面,针对不同稀有度,对全息图的种类、发光方式以及UV印刷等特殊加工加以变化,从视觉上演绎出各稀有度的层级。
例えば、C(コモン)、U(アンコモン)、R(レア)、RR(ダブルレア)と、カードのレアリティが高くなるほど見た目のインパクトが増し、リッチな質感が施されています。
例如,C(普通)、U(非普通)、R(稀有)、RR(双稀有),卡牌稀有度越高,外观的冲击力就越强,并被赋予更丰富的质感。
Rにはホログラム加工を追加。RRでは、ホログラムの輝き範囲をRよりも増やしている
R加入了全息加工。RR则将全息的闪耀范围做得比R更大。
AR(アートレア)とSAR(スペシャルアートレア)は、ポケモンの生態が感じられるイラストが描かれたカードです。デザインする上ではイラストの見やすさを考慮しながら加工を施しています。
AR(艺术稀有)和SAR(特别艺术稀有)是描绘了能让人感受到宝可梦生态的插画的卡牌。在设计时会兼顾插画的易看性来施加加工。
SR(スーパーレア)は、オーバーナンバーの当たり感と図鑑的な役割をもたせるために、キャラクターの特性を理解しやすいポーズでイラストが描かれています。
SR(超级稀有)为了赋予其超出编号范围的中奖感以及图鉴式的角色,插画采用了容易理解角色特性的姿势来绘制。
UR(ウルトラレア)は、最上級の当たりカードになるので、キラキラ感を重視した印刷加工が施されている
UR(究极稀有)是最顶级的中奖卡,因此施加了重视闪亮感的印刷加工。
以宝可梦卡牌游戏为题材的手机游戏《Pokémon TCG Pocket(PokePoke)》
今回紹介するモバイルゲーム『ポケポケ』は、ポケモン、ディー・エヌ・エー、クリーチャーズの3社共同プロジェクト。ポケモンがパブリッシュと全体をプロデュース、ディー・エヌ・エーがアプリ開発、そしてクリーチャーズがアプリの企画協力とカードゲームの開発を行なっています。
本次介绍的手机游戏《PokePoke》是宝可梦、DeNA、Creatures三家公司共同推进的项目。宝可梦负责发行与整体制作,DeNA负责应用开发,Creatures则负责应用的企划协助与卡牌游戏的开发。
『ポケポケ』のカードは、デジタル表現を加えることができるのが紙のカードとの明確な違いとなります。しかし、開発にあたっては、紙のカードと同等の手ざわり感を持たせることを目指したといいます。
《PokePoke》的卡牌与纸质卡牌的明确区别在于可以加入数字化的表现。但在开发时,据说目标是让卡牌拥有与纸质卡牌同等的触感。
『ポケポケ』では、カードを裏返せる、厚みを持たせるなどの要素を持たせ、ポケモンカードの単なるデジタル版ではなく、独自の魅力がプラスされたカードを創り出すことを目指しました。
《PokePoke》加入了可以翻面、具有厚度等要素,目标不是单纯把宝可梦卡牌数字化,而是创造出增添了独有魅力的卡牌。
また、『ポケポケ』の場合は目の前に対戦相手のいない状況でのプレイも想定されたため、そうした状況でもポケモンカードゲーム本来のプレイ感覚を保つことも重視したといいます。
此外,《PokePoke》也设想了眼前没有对战对手时的游玩场景,据说因此也重视在这种场景下保持宝可梦卡牌游戏原本的游玩手感。
从零开始设计并实现《Pokémon TCG Pocket》独有的设计格式
続いてテクニカルアーティストの半田氏より、デジタルカードである『ポケポケ』カードのフォーマット制作について、コンセプトとそれに基づく仕様を中心に解説が行われました。
接着,技术美术半田先生以数字卡牌《Pokémon TCG Pocket》的格式制作为主题,围绕概念及基于概念的规格进行了讲解。
本講演で紹介されたカードフォーマットの一覧。基本的なものに加えて、特殊な例としてウルトラビーストのフォーマットも紹介された
本演讲中介绍的卡牌格式一览。除了基本格式外,还介绍了作为特殊示例的究极异兽格式
フォーマット制作の流れは、最初にクリーチャーズがコンセプトとデザインを作成し、それを基にクリーチャーズとディー・エヌ・エーで具体的な実現方法や実装の要件などをすり合わせていきます。
格式制作的流程是,首先由 Creatures 制作概念和设计,然后以此为基础,Creatures 与 DeNA 就具体的实现方法和实现要求等进行协调。
その後、ディー・エヌ・エーがフォーマットを実装し、クリーチャーズのチェックを受けながらブラッシュアップを重ねていきます。
之后,由 DeNA 实现格式,并在接受 Creatures 检查的同时反复打磨。
そして最後に、ポケモンとクリーチャーズが監修を行なって完成となります。できあがったフォーマットはテンプレート化させて、カードセットの量産に利用します。
最后,由宝可梦和 Creatures 进行监修,从而完成。完成的格式会被模板化,用于卡牌套装的量产。
本講演では、コンセプトデザインの制作と、その後の実装について、いくつかのフォーマットを例に解説が進められました。
本演讲中,以若干格式为例,讲解了概念设计的制作以及随后的实现。
♢(钻石)与♢♢(钻石2)的格式与实现
紙のカードでは、このレアリティが基本のフォーマットとなります。ポケモンやゲームデザインそのものに新たな変化が起きたとしても、それらをポケモンカードゲームとして成立させるカードです。
在纸质卡牌中,这个稀有度是基本格式。即使宝可梦或游戏设计本身发生了新的变化,这些卡牌也能使其作为宝可梦集换式卡牌游戏成立。
♢と♢♢のフォーマット。カード右下の説明文によって、そのポケモンの情報が得られることで図鑑的な役割も満たしている
♢与♢♢的格式。通过卡牌右下角的说明文字,可以获得该宝可梦的信息,因此也满足了图鉴般的作用
《Pokémon TCG Pocket》中的实现
『ポケポケ』でもこのレアリティを基本フォーマットとして成り立たせるという方針は変わりません。
在《Pokémon TCG Pocket》中,以这种稀有度作为基本格式来成立这一方针并没有改变。
遊びやすいことがフォーマットデザインのコンセプトであり、先述したポケモンカードゲームのフォーマットは遊びやすさを考慮したデザインへとつながっています。
易于游玩是格式设计的概念,前述的宝可梦卡牌游戏格式与考虑到易于游玩的设计相关联。
フォーマットの実装要件は、ポケモンカードの基本フォーマットとして「タイプのわかりやすさ」、「イラストの見やすさ」などを満たすということになる
格式的实现要求是,作为宝可梦卡牌的基本格式,需要满足“属性的易懂性”、“插画的易看性”等条件。
♢与♢♢的格式实现
カードの基礎となる3Dモデルは、厚みのある板形状にすることで、カードを傾けたときやひっくり返したときにかすかに側面が見えるようにデザインされています。
作为卡牌基础的3D模型,通过设计成有厚度的板状,使得倾斜卡牌或翻转卡牌时能隐约看到侧面。
カードに厚みを付けることで、紙のカードのような手ざわり感に近づけることを目指した
通过给卡牌增加厚度,旨在接近纸牌般的手感。
作为游戏资源的格式构成
「UI」、「カード枠」、「背景」、そして「イラスト」という4種類でアセットを分けておき、レイヤー上に合成して描画している
将资源分为“UI”、“卡框”、“背景”以及“插画”这4种,并在图层上合成渲染。
「UI」にはHPや技といったマスターデータの情報やローカライズ処理を含むテキストが載っています。ゲーム実行中にそれらの情報を処理して、オフスクリーンレンダリングしたテクスチャをレイヤーとして扱っています。
“UI”中包含HP和招式等主数据信息以及本地化处理的文本。在游戏运行过程中处理这些信息,并将离屏渲染的纹理作为图层处理。
「カード枠」のアセットは、他のカードやフォーマットでも利用できるように共通化しています。
「卡框」的素材被共通化,以便在其他卡牌或格式中也能使用。
「背景」についてはタイプごとに共通化。カードアセットの量産では、そのカードのタイプ情報を基にエディター機能によって自動で背景色が選ばれ、アセット化されるというようなフローになっています。
「背景」则按属性共通化。在卡牌素材的量产中,流程是根据该卡牌的属性信息,由编辑器功能自动选择背景色并生成素材。
そして「イラスト」は、カードごとに異なるため、そのカード固有のアセットとなります。
而「插画」因每张卡牌各不相同,所以是卡牌固有的素材。
このようにレイヤーを組み合わせてアセットを構成することによって、シンプルなデータ構造を実現。開発や量産のフローが組みやすいなどのメリットがあったとのこと。
像这样通过组合图层来构成素材,实现了简洁的数据结构。据说这带来了易于搭建开发与量产流程等优点。
♢♢♢(3颗钻石)的格式与实现
基本的な部分は♢、♢♢と共通の設計ですが、チャレンジとなったのがカード枠とイラストに異なるホログラム処理を施したこと。
基本部分与♢、♢♢采用共通设计,但成为挑战的是对卡框和插画施加了不同的全息处理。
レアリティが♢♢♢よりも上位のカードには、デジタルの利点を積極的に採り入れていくことで、見た目のインパクトが大きくなっていくだろうと見立てを付けました。
对于稀有度高于♢♢♢的卡牌,他们预判通过积极采用数字特有的表现,外观的冲击力会随之增强。
♢♢♢の場合、紙カードにおけるレアと呼ばれるカードよりも、少しビジュアルインパクトを増やした方が『ポケポケ』では全体的なバランスが良くなると判断し、2種類のホログラムを入れるかたちで設計が固められました。
就♢♢♢而言,他们判断在《Pokémon TCG Pocket》中,相比纸卡里被称为稀有(Rare)的卡牌,稍微增加一些视觉冲击力会让整体平衡更好,于是设计确定为加入两种全息。
最終的には全レアリティのバランスをとりながら決めていった部分ですが、こうした細かなこだわりが、各レアリティごとの価値を生み出す秘訣になっているそうです。
最终这是在兼顾所有稀有度平衡的同时决定的部分,但据说正是这种细致的讲究,成为创造各稀有度价值的秘诀。
♢♢♢フォーマットの実装要件。先に紹介した♢、♢♢と同様にタイプの分かりやすさ、イラストの見やすさを実現しつつ、紙のカードと遜色のないホログラムを再現すること
♢♢♢格式的实现要求。与前面介绍的♢、♢♢一样,在实现属性易懂、插画易看的同时,还要再现与纸卡相比毫不逊色的全息。
♢♢♢的实现格式
♢、♢♢と違い、2種類のホログラムがカード枠とイラストに加わっています。
与♢、♢♢不同,在卡框和插画之上增加了两种全息效果。
イラストにかかるホログラムBは、レイヤー構造を採ったことで、差し替えが簡単になっています。そこで、いくつかのホログラムパターンをテンプレート化しておき、イラストに合っているものを選ぶ(実機上で差し替える)というフローが組まれました。
覆盖在插画上的全息B采用了图层结构,使得替换变得简单。因此,他们构建了一套流程:将若干全息图案模板化,然后选择与插画匹配的图案(在实机上替换)。
ホログラムについては、紙のカードのホログラム表現を擬似的に表現しています。
关于全息效果,是对纸制卡牌的全息表现进行了模拟再现。
紙のカードの場合、カードの表面に当たった光が「回折格子(かいせつこうし)」と呼ばれるフィルムによって波長ごとに異なる方向へ回折することで虹色の反射を起こしています。
在纸制卡牌的情况下,照射到卡面的光会通过被称为“衍射光栅”的薄膜,按波长向不同方向衍射,从而产生彩虹色的反射。
『ポケポケ』のホログラム表現では、位相テクスチャを作成。それをシェーダー処理によって疑似的な回折格子による光の干渉パターン、ホログラムの反射を白黒で再現しています。
在《Pokémon TCG Pocket》的全息表现中,他们制作了相位纹理。通过着色器处理,以黑白方式再现了由模拟衍射光栅产生的光干涉图案和全息反射。
さらにその結果に対して、グラデーションテクスチャで色を付けることで、プリズム効果を表現しています。
此外,对上述结果使用渐变纹理上色,从而表现出棱镜效果。
イラストに重なるホログラムBに対しては、マスクで強度を調整することによって、イラスト中のポケモンの視認性を両立させています。
对于叠加在插画上的全息B,通过遮罩调整强度,从而兼顾插画中宝可梦的可见性。
カードが正面を向いた状態ではカード全体にホログラムが入るようにしつつ、どの角度に傾けても色味や強さの印象がバランス良くなることを目指した
目标是让卡牌正面朝向时全息覆盖整张卡牌,同时无论倾斜到哪个角度,色调和强度的观感都能保持平衡。
☆(星1)和☆☆(星2)的格式与实现
「☆(星1)」と「☆☆(星2)」はイラストがカードの全面に描かれています。
「☆(星1)」和「☆☆(星2)」的插画绘制在卡片的整个面上。
☆は、♢、♢♢、♢♢♢の中から選定されたスペシャルアート。☆☆は、♢♢♢♢のうちEXカードと呼ばれるもののなかから選定されたスペシャルアートです。
☆是从♢、♢♢、♢♢♢中选出的特别插画。☆☆则是从♢♢♢♢中被称为EX卡的那些里选出的特别插画。
☆は可愛らしいポケモンを描く機会も多いので、カード枠のデザインは柔らかい印象に見えるものにしました。一方、☆☆は強いロジックが入るカードのため、スマートな印象に見えるカード枠のデザインを採用しています。
☆因为绘制可爱宝可梦的机会较多,所以卡片边框的设计采用了看起来柔和的印象。另一方面,☆☆因为是有强逻辑的卡片,所以采用了看起来更精致的卡片边框设计。
フォーマットの実装要件は、「ホログラムの加工表現は、主役のイラストを引き立てるもの」。カードを見た人が真っ先にイラストの魅力に目を奪われるものにすることだ
格式的实现要求是「全息加工的呈现要衬托主角插画」。要让看到卡片的人首先被插画的魅力吸引。
☆☆の実装については、カード枠とイラストに対して異なるホログラム処理が施されています。
关于☆☆的实现,对卡片边框和插画施加了不同的全息处理。
☆☆のフォーマット構成。イラストはフルサイズになっている
☆☆的格式构成。插画为全尺寸。
イラストにかかるホログラムBの実装では、ホログラムにマスクがかけられています。
在施加于插画的全息B的实现中,全息被加了遮罩。
シェーダー処理によって、カードが正面を向いているときほどマスクが強くかかるようにすることで、真っ先に主役となるイラストに目を向かせるというコンセプトを成り立たせています。
通过着色器处理,使卡片越朝向正面遮罩越强,从而成立让视线首先投向主角插画这一概念。
カードが正面を向いているときはホログラムBに施されたマスクが強くかかるため、主役のイラストがしっかりと見える。傾けたときには全体にホログラムが入り、レアリティの高さを象徴する豪華な印象に仕上げられた
卡片朝向正面时,施加于全息B的遮罩较强,因此主角插画能清晰可见。倾斜时整体会呈现全息,营造出象征高稀有度的华丽印象。
♢♢♢♢(钻石4)的格式与实现
♢♢♢♢(ダイヤ4)カードは、対戦で活躍することが多いカード。そこでポケモン同士の迫力ある戦いや激しく躍動する姿をテーマとしたイラストが描かれるフォーマットになっています。
♢♢♢♢(钻石4)卡牌多为在对战中活跃的卡牌。因此,其格式被设定为以宝可梦之间充满魄力的战斗、激烈跃动的姿态为主题来绘制插画。
バトルの緊迫した瞬間を描き出すべく、カードのフレームから飛び出してくるような勢いのあるポージング、鮮やかな技のエフェクト表現、バトルの状況に応じてポケモンたちが見せる表情、さらには存在感が増すような派手で特徴的なホログラム柄が意識的に採り入れられています。
为了描绘出战斗紧迫的瞬间,卡牌有意识地采用了仿佛要从卡框里跃出般富有动势的姿势、鲜艳的招式特效表现、宝可梦们根据战斗状况展现的表情,以及能增强存在感的华丽而独特的全息图案。
カード全体としてポケモンの持つ強さや迫力、激しさを鮮烈かつ印象的に演出することを目指すのが♢♢♢♢フォーマットのコンセプト
作为整张卡牌,力求将宝可梦所拥有的强大、魄力与激烈鲜明而令人印象深刻地演绎出来,这就是♢♢♢♢格式的理念
そんな♢♢♢♢フォーマットの要件は、デジタルならではの視差効果によって、より立体的かつ迫力ある演出を実現する複数のホログラムパターンを効果的に組み合わせつつ、カード全体としてポケモンの持つ強さや迫力をより鮮やかに表現することでした。
这种♢♢♢♢格式的要求是,通过数字特有的视差效果,在有效组合多种全息图案以实现更具立体感、更有魄力的演绎的同时,作为整张卡牌更鲜明地表现宝可梦所拥有的强大与魄力。
これまで紹介されたカードとは違い、エフェクトやポケモンの3Dモデル、示唆がある背景イラストのレイヤーを加えることで立体的な見え方を作り出し、コンセプトである迫力やバトル感を演出するための構成となっています。
与之前介绍的卡牌不同,这里通过加入特效、宝可梦的3D模型以及带有暗示的背景插画图层,营造出立体的观感,形成用于演绎其理念中的魄力与战斗感的构成。
背景イラストは、カードを傾けたときに奥行きがあるかのような見え方になっています。これはシェーダーによって、カメラ方向やカードの角度を基にテクスチャUVをずらし、仮想的に奥行きを表現しています。
背景插画在倾斜卡牌时会呈现出仿佛有纵深的观感。这是通过着色器,基于相机方向和卡牌角度偏移纹理UV,虚拟地表现出纵深。
シェーダーには、汎用的なフォーマットを複数利用している
着色器使用了多种通用格式
ポケモンの3Dモデルは、Houdiniで作成。基のイラストデータからメッシュを生成し、UVマッピングやテクスチャ素材の出力などもHoudiniで行なっているとのこと。
宝可梦的3D模型使用Houdini制作。据称,从原始插画数据生成网格,UV映射和纹理素材的输出等也都在Houdini中完成。
3Dモデルは、カードのイラスト枠から飛び出すような表現に仕上げられています。
3D模型被加工成仿佛从卡牌插画框里跃出的表现。
描画する際にステンシル機能を活用することで、3Dモデルが部分的にカード枠で隠れるようになっています。
渲染时通过活用模板功能,使3D模型的一部分被卡框遮挡。
図の場合、ピカチュウの尻尾の先端や左手がイラスト枠の奧側に隠れるように描画。Houdini上で3Dモデルのポリゴンに対して複数のマテリアルを使い分けることで、イラストワークとの前後関係を設定している
图中,皮卡丘的尾巴尖端和左手被渲染成隐藏在插画框的内侧。在Houdini上对3D模型的多边形区分使用多种材质,从而设定与插画的前后关系。
♢♢♢♢フォーマットのホログラムは、背景、カード枠、ex/exルールのUI、ポケモンの目の部分に施されています。これらのホログラムの鮮やかさによっても、♢♢♢♢コンセプトであるポケモンの強さや迫力が表現されています。
♢♢♢♢格式的全息效果施加在背景、卡框、ex/ex规则的UI以及宝可梦的眼睛部分。这些全息效果的鲜艳程度也表现了♢♢♢♢概念中宝可梦的强大与魄力。
カードを傾けると、カード全体で立体的な視差が感じられるのと同時に、さまざまなホログラムの反射が見えるようにデザイン。ポケモンの目がキラッと光ることで、生命感も演出されています。
设计上,倾斜卡牌时,整张卡牌能感受到立体的视差,同时能看到各种全息效果的反射。宝可梦的眼睛闪闪发光,也营造出了生命感。
☆☆(星2)的格式与实现
フルイラストを採用した☆☆(星2)カードのフォーマットは、♢♢♢♢と同様に視差効果を取り入れつつ、それ以上に特別感や獲得したときの当たり感を高めたものとなっています。
采用全插画的☆☆(星2)卡牌格式,在引入与♢♢♢♢相同的视差效果的同时,进一步提升了特别感和获得时的中奖感。
全面にイラストが描かれたフルイラストでありながらも、ポケモンの姿形をじっくりと確認したくなるという時間的な要素も大切なコンセプトとなっています。
虽然是全面绘制插画的全插画,但让人想仔细确认宝可梦身姿形态这一时间性要素也是重要的概念。
そこで、バトルシーンに見られる動きの激しいポージングではなく、そのポケモンが本来持っている体の特徴や体型、ディテールなどが把握しやすい、落ち着いたポーズや角度を採用したイラストが描かれています。
因此,插画没有采用战斗场景中那种动作激烈的姿势,而是采用了容易把握该宝可梦本来具有的身体特征、体型和细节等的沉稳姿势与角度。
紙のカードでは、こうしたレアリティならではの素材や加工に工夫を重ねることで、ハイレアリティカードらしい見た目や手触りを実現してきました。
在纸质卡牌中,通过在这种稀有度特有的材质和加工上反复钻研,实现了配得上高稀有度卡牌的外观与手感。
そうした考え方は『ポケポケ』でも変わっていません。視差効果をはじめ、派手なホログラム柄やキラエフェクト、ポケモンのイラスト部分を縁取る金のアウトラインなどを駆使して、ハイレアリティ感がしっかりと演出されています。
这样的思路在《Pokémon TCG Pocket》中也没有改变。通过运用视差效果、华丽的全息图案和闪光效果、勾勒宝可梦插画部分的金色轮廓等,切实营造出了高稀有度感。
☆☆卡牌的格式构成
ホログラム処理は、「カード枠」、「ポケモン」「背景イラスト」の3ヶ所。
全息处理分为“卡框”、“宝可梦”、“背景插画”三处。
カード枠のホログラムには細かいパターンを敷き詰めて、より豪華な印象に
卡框的全息中铺满细密的花纹,营造出更华丽的印象
☆☆カードもポケモンは3Dモデルで表現。ただし、フルイラストの3Dモデルでは、ポケモン全体にホログラムを入れた、アウトライン表現が施されています。
☆☆卡牌的宝可梦也用3D模型来表现。不过,在全插画的3D模型中,对宝可梦整体施加了全息效果的轮廓表现。
ホログラムはカードを傾けているときにだけ反射するように処理。カードが正面を向いているときはポケモンの特徴をしっかりと見せつつ、傾けたときにレアリティの高さがさらに伝わることが目指されました。
全息被处理成只在倾斜卡牌时才会反射。当卡牌正面朝前时,能充分展现宝可梦的特征,而倾斜时则进一步传达出高稀有度,这是其目标。
アウトラインはマスクテクスチャによってイラストの輪郭を指定し、金色にメタリックな反射をするようなシェーダー処理を設定しています。
轮廓通过遮罩纹理指定插画的轮廓,并设置了使其呈现金色金属反射的着色器处理。
究极异兽的☆☆(2星)版式与实现
ウルトラビーストの☆☆(星2)カードのフォーマットでは、傾けると背景が動くようになっています。これによりウルトラビーストが特別なポケモンであることを表現。
在究极异兽的☆☆(2星)卡牌版式中,倾斜时背景会动起来。以此表现究极异兽是特别的宝可梦。
ウルトラビーストのキャラクター性として、不穏さや禍々しい雰囲気を表現。ただし、手に入れたい、コレクションしたいと感じられるカードとしても成り立たせることを目指しフォーマットが固められました。
作为究极异兽的角色性,表现了不安与不祥的氛围。不过,也以成为让人想要获得、想要收藏的卡牌为目标,从而确定了版式。
『ポケポケ』では、ウルトラビーストのカテゴリーバーの模様を背景イラストにも大胆に取り入れています。カードを傾けた際に背景の模様が変化するデジタル演出を施すことで、ウルトラビーストならではの雰囲気とハイレアリティカードとしての特別感、その両方を強く感じられるように仕上げました。
在《Pokémon TCG Pocket》中,究极异兽的类别栏图案也被大胆地融入背景插画。通过施加倾斜卡牌时背景图案会变化的数字演出,最终让玩家能强烈感受到究极异兽独有的氛围与作为高稀有度卡牌的特别感,两者兼得。
究极异兽的☆☆卡牌的版式构成
通常の☆☆と基本的には同じ構成ですが、UIにウルトラビーストと書かれたカテゴリーバーを追加、背景イラストにはアニメーションするマーブル柄を採用しています。
基本结构与通常的☆☆相同,但在UI中追加了写有“究极异兽”的类别栏,背景插画采用了带动态效果的大理石纹理。
マーブル柄の背景イラストは、有機的過ぎたり、禍々しさが出過ぎると不快な印象になってしまうため、コレクションしたいと感じさせることにも配慮しました。
大理石纹理的背景插画如果过于有机、或诡异感过强,会给人不适的印象,因此也顾及了让人产生收藏欲望这一点。
アニメーションは、ドロっとした液体が流れるような、有機的な動きを採用。カードを傾ける方向によって、異なる印象に仕上げられています。
动画采用了黏稠液体流动般、富有有机感的动态。根据倾斜卡片的方向,可以呈现出不同的观感。
そうしたマーブル柄に沿った発光や、カード枠の周辺ほど暗くなるというビネット効果を加えることで、怪しさ、不穏な印象を演出しています。
通过配合这种大理石纹理的发光效果,以及卡片边框周围越靠外越暗的暗角效果,营造出了诡异、不安的印象。
マーブル柄の背景イラストの制作では、最初にディー・エヌ・エーとクリーチャーズとで完成イメージをすり合わせました。
在大理石纹理背景插画的制作中,首先由DeNA与Creatures双方就完成效果进行了沟通对齐。
フォーマットのコンセプトやリファレンスを共有しながら、対面で話しながら完成イメージを細かくすり合わせていった
在共享格式概念与参考的同时,通过面对面交流,细致地就完成效果进行了沟通对齐。
アニメーション方法については、カードの傾き方向、角度に応じてグラフィックが変化し続けること、カードを正面方向に戻すと最初の見た目に戻ることの2点を念頭に、実装方法を検討。
关于动画方式,以两点为前提探讨了实现方法:图形随卡片的倾斜方向与角度持续变化;将卡片恢复正面方向时回到最初的外观。
最初に考案されたのは、フローマップなどによるUVスクロールです。
最初构思的方案是利用流图(flow map)等进行UV滚动。
UVの変形によってデクスチャーを歪め、マーブル柄を表現できるのではと考えたそうですが、カードの傾きに合わせてさまざまな方向にUVを移動させつつ、マーブル柄を破綻させないようにするのは難易度が高そうでした。
据说当时的想法是通过UV变形使贴图扭曲,从而表现出大理石纹理,但要让UV随卡片倾斜向各个方向移动、同时又不让大理石纹理崩坏,难度似乎很高。
また、フローマップでよく用いられるアニメーションを透過によってループさせるという手法も物理的に不自然に見えがちであり、カード表現としての一貫性や手触り感が遠ざかることも懸念されました。
此外,流图中常用的通过透明处理让动画循环的手法,在物理上也容易显得不自然,令人担忧会偏离卡片表现应有的统一感与手感。
次に思いついたのはフィードバックエフェクト。再帰的にアニメーションを更新していくことで、液体のような表現ができるのではと考えました。
接下来想到的是反馈效果。通过递归地更新动画,或许能做出液体般的表现。
しかし、こちらも制約としてあったカードを正面方向に戻した時に、自然に最初の見た目に戻すということが難しく感じられました。
但这里同样存在制约:当卡牌转回正面方向时,很难让它自然地恢复成最初的外观。
そこで改めてリファレンスやリキッドライトショー(※)の映像を見返したといいます。
于是据说他又重新回看了参考以及液体灯光秀(※)的影像。
※ VJなどに用いられるアナログな映像パフォーマンスの一種で、透明な板の上にインクを流し込み、それらのインクの色や動きを照明光で投影するというもの
※ 一种用于VJ等的模拟影像表演,将墨水注入透明板,再用照明光把墨水的颜色与动态投影出来。
これらを見返した結果、「インクが流し込まれ、その領域が広がる」「領域同士がつながったり押し合ったりする」という2つの特徴を実現させることを思いついたそうです。
重新回看这些影像后,他想到要实现两个特征:“墨水被注入,其区域随之扩展”“区域之间相互连接或相互推挤”。
領域を区切るように色付けていく手法には、セルラーノイズが使えるのではないかと考えました。
对于像划分区域那样上色的手法,他想到或许可以使用细胞噪声。
セルラーノイズのシェーダー(※)をベースに実装していくことによって、完成イメージへと近づけていきました。
以细胞噪声的着色器(※)为基础进行实现,逐步向完成后的构想靠拢。
※ 初めにポイントをいくつか配置しておき、ピクセルシェーダーで、そのピクセルから各ポイントまでの距離を計算。1番近いポイントとの距離を基に色を決定する
※ 先放置若干个点,在像素着色器中计算该像素到各点的距离,再根据与最近点的距离决定颜色。
セルラーノイズシェーダー。ポイントに近いピクセルは赤く、遠いピクセルは黒くなっている
细胞噪声着色器。靠近点的像素呈红色,远离点的像素呈黑色。
このセルラーノイズシェーダーをベースに、領域の広がりなどが表現できるマーブルシェーダーが実装されていきました。
以这个细胞噪声着色器为基础,实现了能够表现区域扩展等的大理石着色器。
マーブルシェーダーの基本的な仕組みは、セルラーノイズと同様にポイントを配置したうえで、そのポイントに影響度を持たるというもの。ピクセルは一番近いポイントだけでなく、複数のポイントとの距離と影響度を基に色を決定していきます。
大理石着色器的基本机制与细胞噪声相同,都是先配置点,再让这些点具有影响度。像素不仅参考最近的点,还会根据与多个点的距离和影响度来决定颜色。
例として、プラスとマイナスを赤と青で表現
例如,用红色和蓝色来表现正与负
そこへさらにUVシェーダーやラジアルシェーダーといった、歪みの機能を追加。
在此基础上,进一步加入UV着色器和径向着色器等扭曲功能。
マーブルのシェーダー処理でピクセルとポイントの距離を測る前に、ピクセルの位置を仮想的に移動させることで歪みの表現をしています。
在大理石着色器处理中,测量像素与点的距离之前,先让像素的位置在虚拟层面上移动,以此表现扭曲。
領域が歪むことで、有機的な印象が増した
区域发生扭曲后,有机感有所增强
そこへテクスチャリングを施します。上述した実装によって、ポイントから広がる影響値が青から赤のグラデーションになっていました。その値をテクスチャUVとして扱い、赤と黒のテクスチャから色を取得することで、山に等高線が引かれるようなイメージでマーブル柄を作り出しています。
接着施加纹理。通过上述实现,从点扩散开来的影响值形成了由蓝到红的渐变。将这个值作为纹理UV处理,从红与黑的纹理中取色,就能以类似在山体上绘制等高线的方式生成大理石花纹。
仕上げに、動きにドロッとしたニュアンスを加えます。
最后,为动态效果加入黏稠的质感。
マーブル柄を表現するためのパラメータであるポイントの配置と影響度、歪みをカードの傾きに合わせてコントロールすることで、マーブル柄の動きを作り出しました。
用于表现大理石花纹的参数——点的配置与影响度,以及扭曲——会配合卡片的倾斜进行控制,从而生成大理石花纹的动态。
その動きをドロッとした印象にするために、パラメータのコントロールにPD制御というフィードバック制御を用いることでアニメーションの出発と到着に遅延を生じさせています。
为了让这种动态呈现出黏稠的印象,在参数控制中采用了名为PD控制的反馈控制,使动画的起始与到达产生延迟。
カードの傾きに合わせてポイントを移動している様子。緑のポイントが遅延なし、赤のポイントが遅延ありのもの。静止画ではわかりづらいのだが、ポイント位置の遅延の度合いがビジュアルにも反映される仕組みとなっている
图中展示了点配合卡片倾斜而移动的情形。绿色的点没有延迟,红色的点带有延迟。静态图不易看出,但点位置的延迟程度也会反映到视觉效果中。
そしてクリーチャーのチェックを通してブラッシュアップが重ねられました。
并且通过Creatures的检查反复进行了打磨。
マーブルの発生源や細い線が連続する部分は、有機的な印象が強く出過ぎて、不快感につながる恐れがあるため、そうした箇所にディスプレイスメント処理などを追加して、印象を調整しました。
大理石纹理的产生源以及细线连续的部分,因为有机感过于强烈,可能会带来不适感,所以对这些地方追加了置换处理等,调整了整体印象。
さらに、カードをどの方向に傾けてもアニメーションのスピードや尺が一定の範囲内に収まるようにも調整。
此外,还调整了无论卡片朝哪个方向倾斜,动画的速度和时长都能保持在一定范围内。
マーブル柄のアニメーションについては、表現の大半をアセットベースではなくジェネラティブな手法を用いているため、意図した動きやビジュアルを作ったり微調整をするのが大変にはなったそうです。しかし、その分有機的でウルトラビーストらしい印象に仕上げることができたとのこと。
关于大理石花纹的动画,由于表现的大部分并非基于素材,而是采用了生成式手法,因此据说制作出符合意图的动作和视觉效果并进行微调变得非常困难。但正因如此,才得以完成具有有机感、符合究极异兽印象的效果。
异色1、异色2的格式与实现
紙のカードゲームのほうでは、基本的にゲームソフト『ポケットモンスター』シリーズ本編を踏襲した設計が行われています。そのため、ゲームソフトで採用されている色違いポケモンの登場エフェクトを同シリーズの色違いカードにも取り入れるという方針の下、フォーマットのデザインが行われています。
在实体卡牌游戏中,基本上采用了沿袭游戏软件《宝可梦》系列正作的设计。因此,在将游戏软件中采用的异色宝可梦登场特效也引入该系列异色卡牌的方针下,进行了格式设计。
一方、『ポケポケ』はゲームソフトのシリーズを踏襲した商品設計ではないため、『ポケポケ』オリジナルの色違いポケモン登場エフェクトを新たにデザインするという考えでフォーマットデザインが行われました。
另一方面,《Pokémon TCG Pocket》并非沿袭游戏软件系列的商品设计,因此以全新设计《Pokémon TCG Pocket》原创的异色宝可梦登场特效为思路,进行了格式设计。
色違い1・色違い2のカードのデザインフォーマットは、色違いポケモンが登場するその瞬間の演出をコンセプトとしています。
异色1、异色2卡牌的设计格式,以异色宝可梦登场那一瞬间的演出为概念。
异色1、异色2的格式实现
フォーマットの実装要件は、「ポケモンの体色が鮮明かつ視認性が高く、誰が見ても印象的でわかりやすい表現となっていること」「このカードだからこその表現によって、希少性やプレミア感を持たせること」の2点です。
格式的实现要求有两点:“宝可梦的体色鲜明且辨识度高,无论谁看都是令人印象深刻且易于理解的表现”“通过只有这张卡才有的表现,赋予其稀有性和高级感”。
色違い2のフォーマット構成。☆☆のフォーマット構成をベースに、「トレイルキラ」「プヨキラ」「プリズム」「ミラーボール背景」といった色違いカード特有のフォーマットの表現が追加された
异色2的格式构成。以☆☆的格式构成为基础,追加了“轨迹闪”“软闪”“棱镜”“反射镜球背景”等异色卡特有的格式表现。
色違いカード特有の表現についてもウルトラビーストと同様に、「カードの傾き具合、方向に合わせてグラフィックが変化し続ける」要素が採用されています。ただし、「カードを正面方向に戻したときには、最初の見た目に戻る」といったルールを徹底しています。
关于异色卡特有的表现,也与究极异兽同样采用了“图形会随着卡片的倾斜程度和方向持续变化”的元素。不过,也彻底贯彻了“将卡片转回正面方向时,会恢复为最初的外观”这一规则。
半田氏より実装に用いられた具体的な技法が紹介されました。
半田介绍了实现时所使用的具体技法。
棱镜表现
カードを傾けると中心からプリズムが飛び出す。アニメーションの到着タイミングをずらしたり、飛び出す距離に応じて光の分光を変化させたりと、自然な演出となるように調整された
倾斜卡片时,棱镜会从中心飞出。通过错开动画的到达时机、根据飞出的距离改变光的分光等方式进行调整,使其成为自然的演出。
まずは、プリズムを描画するためのメッシュをHoudiniで作成します。
首先,用Houdini创建用于渲染棱镜的网格。
円状にポイントを並べつつ、ノイズトップなどによって自然な配置になるよう調整。そのポイントに対してグリッドを自動で配置し、UVを割り当てます。
在将点排成圆状的同时,通过噪波顶等调整为自然的配置。针对这些点自动配置网格,并分配UV。
各頂点データには、その頂点が所属するグリッドの中心座標を格納しています。
各顶点数据中,存储了该顶点所属网格的中心坐标。
Houdiniの[Measure]SOPノードによってグリッドごとに重心を計算。それを各頂点に渡し、UV2として格納してメッシュを出力しています。
通过Houdini的[Measure]SOP节点按网格计算重心。将其传递给各顶点,作为UV2存储并输出网格。
このようにパーツの中心位置を各頂点が持っておくことで、頂点シェーダーによるパーツごとのアニメーションが作りやすくなっています。
像这样让各顶点持有部件的中心位置,就更容易通过顶点着色器制作按部件进行的动画。
生成したメッシュをUnityに読み込み、頂点シェーダーでグリッドを移動させます。
将生成的网格导入Unity,通过顶点着色器移动网格。
頂点に付与しておいたグリッドの中心を移動方向の計算に利用することで、グリッドの形やサイズを変えないまま外側に飛び出すような動きにしています。また、スクリプトによってカードの傾きに応じて飛び出すという制御も施されています。
通过将预先赋予顶点的网格中心用于移动方向的计算,使网格在不改变形状和尺寸的情况下向外飞出。此外,还通过脚本实现了根据卡牌倾斜度飞出的控制。
プリズムのテクスチャリングについては、メッシのUVを基にテクスチャから色を取得しています。
关于棱镜的贴图处理,是基于网格的UV从纹理中获取颜色。
プリズムが飛び出すアニメーションと同時に、テクスチャのRGBの取得値を少しずらすことで、分光しているような印象に仕上げられている
在棱镜飞出的动画同时,稍微偏移纹理RGB的获取值,从而营造出分光般的印象。
また、色の補間にはOkLab色空間を利用。明度と彩度を知覚的に均一に保ったまま色素の補間ができるため、フォーマット全体としてのなじみが良く感じられるといいます。
此外,颜色插值使用了OkLab色彩空间。由于能在保持明度与饱和度感知均匀的情况下进行色素插值,据说整体格式的协调感会更好。
反射镜球背景
小さい円盤が敷き詰められており、カードの向きが変わると反射している円盤が切り替わっていくというものです。
铺满了小圆盘,当卡牌方向改变时,反射的圆盘会随之切换。
紙のカードのようなキラキラした印象に近づけるべく、メタリック感が演出されている
为了接近纸质卡牌那种闪亮的感觉,营造出了金属质感。
カードが正面を向いたときは再現性が担保された同じ見た目にするため、カードの角度に応じて光り方が一意に決まり、ランダムに一定の変化をし続けてるように見えるという仕組みを実装しました。
当卡牌正面朝向时,为了保证可复现性、呈现相同的外观,实现了根据卡牌角度唯一确定发光方式、同时看起来又在持续进行随机且一定变化的机制。
反射镜球的着色器处理
カードの傾き方向を取得する その傾き方向を基に角度反射マップテクスチャから値を取得し、反射インデックスという0から1の値に変換する ミラーボールテクスチャを利用し、Rチャンネルには円盤の形状マスク、Gチャンネルには円盤ごとにランダムな反射インデックスの値を入れる。シェーダーでミラーボールテクスチャから反射インデックスを取得して、<2>で変換してきた反射インデックスと近い値であった場合は、そのピクセルを反射させる
获取卡牌的倾斜方向。根据该倾斜方向,从角度反射贴图中取值,并转换为0到1之间的反射索引值。利用反射镜球贴图,在R通道放入圆盘形状的遮罩,在G通道放入每个圆盘随机的反射索引值。在着色器中从反射镜球贴图获取反射索引,若与<2>中转换得到的反射索引值接近,则让该像素产生反射。
<3>では、同時に形状マスクをかけることで円盤の形を作成しています。
在<3>中,同时叠加形状遮罩,从而形成圆盘的形状。
以上の流れによって、角度に応じて一意に光り方が決まりつつも、ランダム感があり、動きに対して一定量の変化をし続ける表現に仕上げられました。
通过以上流程,最终实现了这样一种表现:发光方式随角度唯一确定,同时又带有随机感,并会随着动作持续产生一定量的变化。
角度反射贴图与反射镜球贴图的制作
角度反射マップとミラーボールテクスチャはHoudiniで作成しています。
角度反射贴图和反射镜球贴图是在Houdini中制作的。
角度反射マップについては、ノイズのテクスチャなども試したそうですが、変化が急すぎたり、変化しないタイミングがあるなど、カードの動きに対して変化量にムラがあったため不採用に。
关于角度反射贴图,据说也尝试过噪声贴图等方案,但由于变化过于剧烈,或存在不产生变化的时机,相对于卡牌动作的变化量不均匀,因此未被采用。
カードをぐるぐると回転させても、傾き具合を変えても、無駄なく一定量変化し続けるようにマッピングを試行錯誤して、最終的に渦のようなテクスチャが作成されました。Houdini特有のプロシージャルな仕組みを用いることで、パラメトリックなテクスチャや、色違い1と色違い2といった複数パターンの制作を効率的に行えたそうです。
为了让卡牌无论怎样旋转、无论怎样改变倾斜程度,都能无浪费地持续产生一定量的变化,团队反复试错进行映射,最终制作出了漩涡状的贴图。据说通过运用Houdini特有的程序化机制,能够高效地制作参数化贴图,以及异色1、异色2等多种图案。
反射镜球贴图的生成步骤
<1>の処理で[Copy to points]SOPノードを使い、円盤を敷き詰めて配置。それぞれの円盤には、0から1のランダムな値を反射インデックスアトリビュートとして付与しておきます。
在<1>的处理中,使用[Copy to points]SOP节点,将圆盘铺满并排列。为每个圆盘赋予0到1之间的随机值,作为反射索引属性。
<2>では、テクスチャ解像度と分割を揃えたグリッドを作成して、ミラーボールドを重ねて配置。その後、[Attribute transfer]ノードで現場の形状と反射インデックスをグリッドに転写して、それをカラー化しています。
在<2>中,创建与贴图分辨率和分割数一致的网格,并叠加放置反射镜球。之后,使用[Attribute transfer]节点将现场的形状与反射索引转写到网格上,再将其颜色化。
Gチャンネルはシェーダー処理上、形状マスクよりも大きく覆っている必要があるため、ノードの[Distance threshold]パラメータを調整して隙間のないように転写します。
G频道的着色器处理需要覆盖比形状遮罩更大的范围,因此调整节点的[Distance threshold]参数,使其转印后不留缝隙。
そして最後にグリッドをテクスチャ化します。
最后将网格纹理化。
今回は[Top to generator]ノードでグリッドジオメトリをインポートして、プリミティブごとのカラーアトリビュートをピクセルに変換することでテクスチャ化させている
这次使用[Top to generator]节点导入网格几何体,通过将每个图元的颜色属性转换为像素来实现纹理化。
さらにホログラムやメタリック感のシェーダーを組み合わせることで、紙のカードのようなキラキラ感が目指されました。
再结合全息与金属质感的着色器,以追求类似纸质卡片的闪亮效果。
拖尾闪
「トレイルキラ」とは、カードを傾けるとキラが回転しながら半円状に動き、そのトレイルが軌道を辿るというものです。
所谓“拖尾闪”,是指倾斜卡片时闪光一边旋转一边呈半圆形移动,其拖尾会沿轨迹留下。
トレイルキラ表現は、専用に開発したスクリプトとシェーダーによって制御しています。
拖尾闪的表现由专门开发的脚本与着色器控制。
まずはキラ表現の検討が行われました。初期実装の段階では立体的な表現にしていましたが、カード全体としてあまり馴染まず、独立したエフェクトのように見えてしまっていました。
首先对闪光表现进行了探讨。初期实现阶段采用的是立体表现,但作为整张卡片显得不太协调,看起来像是独立的特效。
左端が初期実装の段階の立体的な表現
左端为初期实现阶段的立体表现
そこで平面的な表現に変更し、ビルボードなどの三次元的な表現も使わないようにしました。
于是改为平面表现,也不再使用公告板等三维表现。
エフェクトが平面的に見えてしまうことは一般的に避けたいものですが、『ポケポケ』カードの表現としての一貫性が保たれ、本タイトル特有のリアルさや手触り感に近づけることができたそうです。
特效看起来扁平通常是应当避免的,但据说这样保持了《Pokémon TCG Pocket》卡牌表现的一致性,并能够接近本作特有的真实感与手感。
闪光被渲染出来的机制
描画に使用するメッシュは、グリッドを重ねてワンメッシュにしてあります。シェーダーアニメーションのために、グリッドごとにプリミティブIDを持たせています。
用于渲染的网格是将网格叠加合并为一个网格。为了进行着色器动画,每个网格都带有图元ID。
闪光旋转并渲染的步骤
スクリプト処理。カードの傾きを基にプリミティブの回転などを計算し、マテリアルにパラメータを渡す。制御の内容としては、カードが傾いている間はゆっくり回転、カードが正面を向いているときはキラが最初の見た目と一致するように逆算して減速する 頂点シェーダーでプリミティブIDを基に受け取ったパラメータを参照し、回転アニメーションが施される 回転したプリミティブに対して、フラグメントシェーダーでテクスチャリング、明るさなどを調整
脚本处理。根据卡牌的倾斜计算图元的旋转等,并将参数传递给材质。控制内容方面,卡牌倾斜期间缓慢旋转,卡牌正面朝向时则反推计算使其减速,以使闪光与最初的外观一致。在顶点着色器中,基于图元ID参照接收到的参数,施加旋转动画。对旋转后的图元,在片元着色器中进行纹理贴图、亮度等调整。
拖尾表现
単純なトレイルではなく、カメラレンズで発生する光の効果のような印象も目指してブラッシュアップが重ねられました。
并非单纯的拖尾,而是以类似相机镜头产生的光效印象为目标反复打磨。
トレイルの形状は、軌道を辿るという役割をしつつ、常に終端に向かって細くなるように調整。軌道の折り返し部分を細くしたり、進行方向にも細い形状が飛び出すようにされました。
拖尾的形状在承担追踪轨迹这一作用的同时,始终被调整为朝向末端逐渐变细。轨迹的折返部分被变细,并且在行进方向上也有细小的形状飞出。
また、カードを速く動かしたときも、2つのトレイルが重ならないようにするために、明るさや太さのパラメータは時間だけでなく距離に応じても減衰させています。それらの減衰が滑らかに両立するように調整されました。
此外,当卡牌快速移动时,为了避免两条拖尾重叠,亮度与粗细的参数不仅随时间衰减,还根据距离衰减。这些衰减被调整为能够平滑地并存。
拖尾的渲染机制
最初に、描画するための円状のメッシュを作成します。今回は、トレイルの経路があらかじめ決まっていたため、メッシュの動的な生成や変形は必要ありませんでした。
首先,创建一个用于渲染的圆形网格。这次因为轨迹的路径已经预先确定,所以不需要动态生成或变形网格。
そこでメッシュにトレイルを載せるような描画方法が用いられました。
因此采用了在网格上绘制拖尾的渲染方法。
スクリプト制御でカードの傾きを基にキラの軌道や減衰の処理。円周上の各頂点に対する明るさパラメータを計算し、メッシュの頂点データを更新することで受け渡す 頂点シェーダーの処理では、その明るさパラメータでUVスケールを除算。UVでテクスチャを取得する際、UVスケールが小さくなった部分のトレイルは太くなり、UVスケールが大きい部分のトレイルは細くなるように調整 実際にテクスチャを取得した結果
通过脚本控制,根据卡片的倾斜度处理闪光的轨迹和衰减。计算圆周上各顶点的亮度参数,并更新网格的顶点数据来传递。在顶点着色器处理中,用该亮度参数除以UV缩放。获取UV纹理时,调整为使UV缩放变小的部分拖尾变粗,UV缩放大的部分拖尾变细。实际获取纹理的结果
软闪
「プヨキラ」はカードを傾けるとプヨプヨと動くキラのアニメーションです。
“软闪”是倾斜卡片时闪光软软地移动的动画。
スケールアニメーションには、UnityのAnimationCurveを利用しています。
缩放动画使用了Unity的AnimationCurve。
カードの傾きに応じてカーブからスケール値を取得し、頂点シェーダーでスケーリング。カーブを利用することで自由度が高く、直感的に調整できるようになった
根据卡片的倾斜度从曲线获取缩放值,并在顶点着色器中进行缩放。通过利用曲线,实现了高自由度和直观的调整。
今回は色違い2のみが紹介されましたが、色違い1も同様の実装を行なっているとのこと。
这次只介绍了异色2,但据说异色1也进行了同样的实现。
本講演で紹介されたカードのフォーマット一覧
本演讲中介绍的卡片格式列表
积极利用Houdini进行程序化自动处理——从2D插画生成网格的工作流
長屋氏と半田氏によるカードのデザインフォーマットとその実装についての紹介に続き、廣田氏よりアーティストワークの一例として、デジタルカードのメッシュ制作の課程が紹介されました。
继长屋氏与半田氏介绍卡牌的设计格式及其实现之后,广田氏以美术人员工作的一例,介绍了数字卡牌的网格制作过程。
デジタル表現の実装を行うにあたっては、パックごとのリリースカードが多数あるため、アセット制作の物量をどう裁くのかが課題になったといいます。
在实现数字表现时,由于每个卡包都有大量卡牌发布,如何应对资产制作的物量成为了一项课题。
これを解決するために、Houdiniを使ったカード自動生成ワークフローを構築し、アーティストが表現のブラッシュアップを行うための時間をできるだけ確保することを目指しました。
为了解决这一问题,构建了使用Houdini的卡牌自动生成工作流,目标是尽可能确保美术人员打磨表现的时间。
资产制作的整个工作流
まず、Photoshopからは各レイヤーをPNG形式で出力、描画視点などの付属情報についてはJSON形式で出力します。
首先,从Photoshop将各图层以PNG格式输出,渲染视点等附加信息则以JSON格式输出。
それらをHoudiniへ読み込み、PNGのポリゴン化、試作用の奥行き設定、マテリアルの付与、パース補正といった形状の生成を行います。
将这些导入Houdini,进行PNG的多边形化、试作用的深度设定、材质的赋予、透视校正等形状的生成。
続いてシェーダー用のテクスチャを作成。テクスチャパッキングなどの描画要素材の生成を行います。その際、細かな部分については非破壊ワークフローで調整を施し、FBXとPNGでUnityへ出力するというものです。
接着创建用于着色器的纹理。进行纹理打包等渲染用素材的生成。此时,对于细节部分以非破坏性工作流进行调整,并以FBX和PNG格式输出到Unity。
デジタルカードの制作に、アーティストが使用するツールはPhotoshop、Houdini、Unityの3つに絞ることでデータ変換などの手間を省力化している
在数字卡牌的制作中,将美术人员使用的工具限定为Photoshop、Houdini、Unity这3种,从而省去了数据转换等繁琐工作
①Photoshop的工序
最初にポケモンのイラストをどのように立体化させるのかクリーチャーズとディー・エヌ・エーで協議し、レイヤー構成が決められます。
首先,由Creatures与DeNA协商如何将宝可梦的插画立体化,并决定图层结构。
イラストが完成したら、Photoshopのスクリプトで頭、腕、足など各部位をレイヤーごとにPNG形式で出力します。
插画完成后,用Photoshop脚本将头部、手臂、腿部等各部位按图层以PNG格式输出。
出力は、原画、塗り、線画の3種類それぞれでレイヤーごとに書き出します。それと並行して、レイヤーに設定されている加算や半透明などの描画情報はJSON形式で書き出します。
输出时,分别将原画、上色、线画三种类型按图层导出。与此同时,将图层中设置的加法、半透明等渲染信息以JSON格式导出。
ポケモンイラスト以外の背景イラストやエフェクトといったレアリティ表現に必要な素材も適宜出力します。
除宝可梦插画外,还会酌情输出背景插画和特效等稀有度表现所需的素材。
②Houdini工序
シェーダー用の画像加工はPhotoshopでは行わず、Houdiniによるコンポジットで行います。そのためPhotoshopのスクリプトは基本的に、必要なレイヤーの表示/非表示を行うといったシンプルな実装となっているそうです。
用于着色器的图像加工不在Photoshop中进行,而是通过Houdini的合成来完成。因此,Photoshop脚本基本上只做显示/隐藏所需图层这类简单处理。
Houdiniの工程では、「ポリゴン化→マテリアルの付与→パース補正→テクスチャ画像の生成」という一連の作業についてはプロシージャルによる自動処理が施されるワークフローを構築しています。
在Houdini工序中,针对“多边形化→赋予材质→透视校正→生成纹理图像”这一系列作业,构建了通过程序化自动处理的工作流。
多边形化
まずイラストの2D画像からポリゴン化を行います。Photoshopから出力されたPNGを読み込み、下のレイヤーから順に[Trace]ノードでポリゴン化して、3D空間上に奥から配置していきます。
首先从插画的2D图像进行多边形化。读取从Photoshop输出的PNG,从下层图层开始依次用[Trace]节点进行多边形化,在3D空间中从后往前配置。
この段階である程度の奥行きを設定しておくことで、アーティストがイチから作業を始めるよりも手早くブラッシュアップ作業に着手できるように配慮されています。
在这一阶段预先设定一定程度的深度,是为了让美术人员能比从零开始更快地着手打磨作业。
奥行きの強度については、コンセプトの段階でクリーチャーズと検討を行い、紙のカード感を残しつつも視差が感じられる深度へと決めていったそうだ
关于深度的强度,据说在概念阶段就与Creatures进行了讨论,最终决定为既保留纸卡质感又能感受到视差的深度。
材质的赋予
マテリアルの付与は、[Python]ノードでPhotoshopのレイヤー描画指定を出力したJSONを参照し、設定を行います。
材质的赋予通过[Python]节点参照输出Photoshop图层渲染指定的JSON来进行设置。
この段階で加算や半透明などのマテリアルが各部に設定されます。その後、カードのフレームとの交差判定を行い、カード枠より手前に描画する部分と奥に描画する部分のマテリアル設定を行なっていきます。
在这个阶段,会为各个部分设置加法混合、半透明等材质。之后,进行与卡牌边框的相交判定,并针对比卡牌边框更靠前渲染的部分和更靠后渲染的部分分别进行材质设置。
作業中はマテリアル名のポリゴングループのみを作成しており、エクスポート直前にグループに対して実マテリアルを付与しています。
作业过程中只创建以材质名命名的多边形组,在导出前一刻才为这些组赋予实际材质。
グループはHoudini内のほぼすべてのノードで対応しており、ワイルドカードを使ったリネームといったHoudini側での制御もサポートされていて利便性が高いため、最後までこのグループを維持しながら処理が行われていきます。
组在Houdini内几乎所有的节点中都受支持,并且支持使用通配符进行重命名等Houdini侧的控制,便利性很高,因此整个处理过程都会维持这些组直到最后。
透视校正
3D空間上で奥行きをつけると、カメラビューではカメラに近い部分が大きく写ってしまいます。
在3D空间上添加纵深后,在相机视图中靠近相机的部分会被拍得更大。
そこでカードを正面から見たときはイラスト本来の見た目を再現するために、[Wrangle]ノードを使い、フリーのスクリプト言語VEXでパース補正を行なっています。
因此,为了在正面观看卡牌时再现插画原本的外观,使用[Wrangle]节点,通过免费脚本语言VEX进行透视校正。
カメラは正面から撮影しているため、単純にカメラからの距離によって各ポイントのスケール値を計算し設定。この仕組みを入れておくことで、アーティストは元となるイラストとのズレを気にせずに安心してポイント単位で奥行きの調整が行えるようになりました。
由于相机是从正面拍摄的,因此单纯根据到相机的距离计算并设置各点的缩放值。有了这个机制,美术师就可以不必在意与原始插画的偏差,放心地以点为单位调整纵深。
纹理图像的生成
アウトライン用のマスクやホログラムなどのシェーダー用の素材は、ノードベースで画像加工を行えるCOPを使って作成。
用于轮廓的遮罩以及全息效果等着色器用的素材,是使用能以节点方式进行图像加工的COP来制作的。
テクスチャパッキングにはUVレイアウトノードを使用し、ポリゴン化したイラストを最終テクスチャサイズのグリッドに詰め込みます。
纹理打包使用UV布局节点,将多边形化后的插画塞入最终纹理尺寸的网格中。
レイアウト実行後に元イラストの各レイヤーがどこに移動したかを計算し、COPでも画像加工後に同様の移動を行い、最終的にUnityに渡すパッキングテクスチャを作成します。
在执行布局后,计算原插画各图层移动到了哪里,并在COP中也于图像加工后进行同样的移动,最终生成交给Unity的打包纹理。
またエフェクトについては、各素材をRGBチャンネルに埋め込んで統合。COPはチャンネルごとの操作などが容易に行えるため、ジオメトリーとの連携もとりやすく、シェーダー用の素材作成に適しているそうです。
此外,关于特效,是将各素材嵌入RGB通道进行整合。COP能够轻松进行按通道的操作等,因此也容易与几何体联动,据说很适合制作用于着色器的素材。
当初は、こうした画像処理をPhotoshopのスクリプトで行なっていたそうですが、Houdini上でCOPによる自動処理へと変更したことで、元のPhotoshopスクリプトの3分の1を占めていた複雑な画像加工のコードが不要となり、メンテナンス性が高くなったといいます。
据说起初这类图像处理是用Photoshop的脚本进行的,但改为在Houdini上通过COP自动处理后,原本占Photoshop脚本三分之一的复杂图像加工代码就不再需要,维护性也提高了。
さらに、COPノード上には各段階の処理内容がサムネイルで表示されるため、スクリプトをブレイクポイントで止めて確認する必要がなくなり、デバッグや調整作業も楽になったそうです。
此外,由于COP节点上会以缩略图显示各阶段的处理内容,不再需要在断点处停下脚本来确认,调试和调整作业也变得轻松了。
③由美术师进行的手工调整
これ以降からは自動処理後に、アーティストが手作業で調整するものとなります。
从这里开始,是自动处理之后由美术师手工调整的内容。
クオリティを上げていくには、部位ごとに細かい調整が必要です。ただし、イラストの調整やパラメータの数値が変更された場合も、編集内容が壊れないように選択エリアを作成しておき、非破壊で調整できる仕組みが構築されています。
要提高品质,需要按部位进行细致调整。不过,即使插画的调整或参数数值发生变更,也会预先创建选择区域以免编辑内容被破坏,从而构建起可非破坏性调整的机制。
視差の調整では、ポケモンの各部位ごとに奥行き感を調整
在视差的调整中,按宝可梦的各个部位调整纵深感
描画に関するポリゴン数の調整やUVパッキングのスケール、イラストをトレースする際のアルファの閾値などもパラメータで細かく調整を行なっていきます。
关于渲染,多边形数量的调整、UV打包的缩放、描摹插画时的alpha阈值等,也都会通过参数进行细致调整。
レアリティごとに出力素材の違いなどはありますが、視差のあるカードについては基本的に以上のワークフローで制作しているとのこと。
虽然不同稀有度输出的素材有所差异,但据说有视差的卡基本上都是按照以上工作流制作的。
元となるイラストからメッシュ生成、テキスチャ作成までが自動的に行われるため、初稿を出力するまでの時間を節約できる
从原始插画到网格生成、纹理制作都是自动完成的,因此可以节省输出初稿之前的时间
Houdiniによるプロシージャル処理を巧みに取り入れることで、アーティストが表現の調整に時間を費やすことができるようになりました。
通过巧妙地引入Houdini的程序化处理,美术师可以将时间花在表现的调整上。
プロジェクト初期はMayaを使ったワークフローだったそうですが、Houdiniを導入したことで工数を約60パーセント削減することができたといいます。
据说项目初期使用的是Maya的工作流,但引入Houdini后,工时削减了约60%。
さらにCOPによる画像の自動処理を採用したことで、Photoshopスクリプトのコード量の削減とメンテナンス性も向上しました。
此外,通过采用COP进行图像自动处理,减少了Photoshop脚本的代码量,维护性也得到了提升。
分别独立控制卡的外观与姿态——运行时数字卡的处理方式
最後にグラフィクスエンジニア山本氏より、作成したデジタルカードのゲームランタイムでの取り扱い方が紹介されました。
最后,图形工程师山本介绍了制作好的数字卡在游戏运行时中的处理方式。
くり返しになりますが、『ポケポケ』のデジタルカードは、カードごとに独自のホログラム処理や視差表現などを有した、厚みのあるカードとして制作されています。
再重复一次,《Pokémon TCG Pocket》的数字卡是按每张卡都拥有全息处理和视差表现等的有厚度的卡来制作的。
ランタイムでは、演出的にこれらのカードを自由に動かせることが求められました。
在运行时,要求能够为了演出效果自由地移动这些卡。
カードはパックの開封やバトルのほかにも、トレードやゲットチャレンジなど、さまざまなシーンや演出で登場します。こうした各種演出ごとに、カードの動き方もさまざまです。
卡牌除了在开包和对战中出现之外,还会在交换、得卡挑战等各种场景和演出中登场。针对这些不同的演出,卡牌的运动方式也各不相同。
また、シーンでのカードの動きに合わせて、ホログラムなどの表現も連動して動かす必要があります。
此外,还需要让全息等表现与场景中卡牌的运动联动起来。
しかし、作成したデジタルカードを3D空間で自由に動かした場合、さまざまな問題が生じたそうです。
然而,据说如果在3D空间中自由移动制作好的数字卡牌,就会产生各种问题。
例えば、実際のゲーム中では動かせない範囲までカードを傾けると、ピカチュウのカードでは発光エフェクトが意図した以上にキャラクターを隠してしまいます。また、ファイヤーのカードの場合、ホログラム表現がキャラクターの上にまでかかり、強く表示されてしまいました。
例如,在实际游戏中无法达到的范围内倾斜卡牌时,皮卡丘的卡牌上发光效果会超出预期地遮住角色。而火焰鸟的卡牌上,全息表现会覆盖到角色之上,显示得过强。
ピカチュウのカードの例(左)とファイヤーのカードの例(右)
皮卡丘卡牌的示例(左)与火焰鸟卡牌的示例(右)
意図しない見た目になることを避けるためにカードを動かせる範囲を制限してしまうと、ランタイムの演出中では自由にカードを回せないなど、利用できる演出の幅が狭まってしまう弊害が起きてしまいます。
如果为了避免出现非预期的外观而限制卡牌可移动的范围,那么在运行时演出中就无法自由旋转卡牌,会导致可用演出的范围变窄这一弊端。
この課題を解決するために、カードの姿勢とその時のカードの見た目をそれぞれ独立して制御することが『ポケポケ』の実装では求められました。
为了解决这一课题,《Pokémon TCG Pocket》的实现中要求将卡牌的姿态与当时卡牌的外观分别独立控制。
カードの姿勢と見た目をそれぞれ独立して制御することができるようになれば、カードを3D空間内では自由に動かすことができるのと同時に、カードの見た目についてはカードがどのような姿勢であっても意図したホログラムや視差表現にすることができます。さらにある程度は、カードの見た目がカードの動きに連動して変化するといったことも達成できます。
如果能够分别独立控制卡牌的姿态与外观,就可以在3D空间内自由移动卡牌,同时无论卡牌处于何种姿态,都能让卡牌的外观呈现出预期的全息和视差表现。进一步还能在一定程度上实现卡牌外观随卡牌运动而联动变化。
そのような仕組みとして、『ポケポケ』ではオフスクリーンレンダリングを活用する方法が考案されました。
作为这样的机制,《Pokémon TCG Pocket》中想出了利用离屏渲染的方法。
今回実装した3Dデジタルカードにおけるオフスクリーンレンダリングでは、カードの厚みを活かすために、カードの表面だけにオフスクリーンレンダリングを活用しています。
本次实现的3D数字卡牌中的离屏渲染,为了发挥卡牌的厚度,仅对卡牌表面利用了离屏渲染。
厚みがあるカードモデルの表面に対して、オフスクリーンレンダリング用の板ポリゴンを用意し、その板ポリゴンに対して、別途用意した専用の空間で撮影したカードの見た目を適用しています。
针对有厚度的卡牌模型的表面,准备一块用于离屏渲染的板状多边形,并将另行在专用空间中拍摄的卡牌外观应用到这块板状多边形上。
撮影されたテクスチャは、わかりやすくするために外側を真っ黒にしてあるが、実際のゲーム中では透明な領域としてシェーダーで処理している
拍摄得到的纹理,为了便于理解,外侧被设为纯黑,但在实际游戏中会通过着色器将其作为透明区域处理。
さらに色違いのポケモンなど、カードによってはエフェクトなどの一部要素がカードの外側に出てくることもあるため、オフスクリーンレンダリング用のポリゴンはカードそのものの形に対して一定の余白を持たせて作成してあります。
此外,像异色宝可梦等卡牌,其特效等部分元素有时会延伸到卡牌外侧,因此用于离屏渲染的多边形是相对于卡牌本身的形状留出一定余量来制作的。
また専用の空間でカードを撮影する際、カードが傾いているとパーツがかかった状態で撮影されています。元のカードの形から変化していることが分かります。
另外,在专用空间中拍摄卡牌时,如果卡牌处于倾斜状态,拍摄到的部件会呈现被拉伸的状态。可以看出其与原本的卡牌形状已经发生了变化。
それぞれ異なる姿勢のカードを撮影したもの。正面からの見た目(左)は長方形のようなシルエットだが、傾いた姿勢で見ると台形のようになっている(右)。さらにカード左側が手前に来たことで、大きく撮影されている
这是分别以不同姿态拍摄的卡牌。从正面看时(左)是近似长方形的轮廓,但以倾斜姿态看时则呈梯形(右)。而且由于卡牌左侧靠近镜头,被拍摄得更大。
この状態でテクスチャのオフスクリーンレンダリングを適用すると、演出用モデルのカードの形と撮影したカードのイラスト部分がずれたおかしな見た目になってしまいます。
在这种状态下应用纹理的离屏渲染,演出用模型的卡牌形状与拍摄到的卡牌插画部分就会错位,呈现出奇怪的外观。
そこで、オフスクリーンレンダリングをするにあたり、今回は撮影したテキストのイラスト部分の形がカードモデルの形に揃うように、テクスチャのUVを補正しながらレンダリングを行うように実装されました。
因此,在进行离屏渲染时,本次的实现方式是:一边对纹理的UV进行校正,使拍摄到的文本插画部分的形状与卡牌模型的形状对齐,一边进行渲染。
射影変換を使った補正。それぞれ異なる姿勢で撮影したカードを適用した3Dモデルが、最終的にシーン中で正面から見たときの見た目に変更されている
使用投影变换进行的校正。分别以不同姿态拍摄的卡牌,应用到3D模型后,最终被变更为在场景中从正面观看时的外观。
最終的には、オフスクリーンレンダリングをするにあたって、カードごとに基準の姿勢を決めておき、演出用のカードの姿勢が基準の姿勢に対して一定の範囲内では、演出用のカードと撮影用のカードの姿勢を連動させます。
最终,在进行离屏渲染时,会为每张卡牌确定一个基准姿态,当演出用卡牌的姿态相对于基准姿态处于一定范围内时,就让演出用卡牌与拍摄用卡牌的姿态联动。
逆に演出用のカードの姿勢がカメラに対して横向きなど一定の範囲内を超えてしまう場合は、撮影用のカードは一定の範囲内にその姿勢を抑えて撮影しています。
反之,当演出用卡牌的姿态相对于镜头横向倾斜等超出一定范围时,拍摄用卡牌则将该姿态控制在一定范围内进行拍摄。
このような実装によって、ホログラムや視差表現が、カードがどのような姿勢であっても破綻することなく、常に意図した姿勢を保つことができるようにされました。
通过这样的实现,全息效果和视差表现无论卡牌处于何种姿态都不会出现破绽,能够始终保持预期的姿态。
3Dシーン中でも自由な動きをさせることのできるデジタルカードを実現
实现了在3D场景中也能自由活动的数字卡牌
この手法は、カードの種類や演出の種類に依存せず、さまざまな演出で汎用的に利用
该手法不依赖于卡牌种类或演出种类,可通用于各种演出
最後に本セッション内容のまとめが紹介されました。
最后介绍了本场演讲内容的总结。
『ポケポケ』におけるデジタルカード表現の中で、表現、開発・制作環境、ランタイムという3つのテーマから、それぞれにおける取り組みが紹介された
在《Pokémon TCG Pocket》的数字卡牌表现中,从表现、开发与制作环境、运行时这三个主题出发,分别介绍了各自的举措
長屋氏より「『ポケポケ』では、今後もこれらのこだわりを持って開発を続けていきます。ぜひ今後もさまざまなカードに触れて楽しんでいただければ幸いです」という言葉をもって本講演は終了しました。
长屋先生以“在《Pokémon TCG Pocket》中,今后也会带着这些坚持继续开发。希望大家今后也能接触各种卡牌并享受其中”这句话结束了本次演讲。