紙のカード本来の魅力とデジタル特有の表現を両立させる。『Pokémon TCG Pocket(ポケポケ)』カード表現の制作手法【CEDEC2025】

紙のカード本来の魅力とデジタル特有の表現を両立させる。『Pokémon TCG Pocket(ポケポケ)』カード表現の制作手法【CEDEC2025】

2025.08.04
CEDEC注目記事見た目を良くするゲームの舞台裏講演レポート3DCGCEDEC2025
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

国内最大規模のゲーム業界カンファレンス「CEDEC2025」が、2025年7月22日(火)から7月24日(木)までの日程で開催されました。2日目となる7月23日(水)には、クリーチャーズの長屋 悟氏、ディー・エヌ・エーの半田佑馬氏・廣田隆哉氏・山本真史氏が登壇し、「Pokémon TCG Pocketにおけるデジタルカード表現とその制作手法」と題した講演が行われました。

長い歴史のあるポケモンカードゲームを題材としたモバイルゲーム『Pokémon TCG Pocket (以下、ポケポケ)』。紙のカードの良さを活かしつつ、どのようにデジタルならではの魅力を加えていったのか、そのワークフローから具体的な表現技法について幅広く紹介された本講演をレポートします。

TEXT / NUMAKURA Arihito

EDIT / 酒井 理恵

目次

ポケモンカードゲーム本来の魅力を残しながら、デジタル表現特有の魅力をアドオンする

本セッションに登壇したのは、クリーチャーズ アート開発部 部長 シニアアートディレクター 長屋 悟氏、そしてディー・エヌ・エーからはゲームサービス事業本部開発運営統括部第一技術部テクノロジー推進第一グループ ヴィジュアルエンジニア / テクニカルアーティスト 半田佑馬氏、同部 グラフィクスエンジニア 山本真史氏、ゲームサービス事業本部開発運営統括部デザイン部クリエイティブ第一グループ テクニカルアーティスト 廣田隆哉氏の計4氏。

右から順に、長屋 悟氏、半田佑馬氏、廣田隆哉氏、山本真史氏

まずは長屋氏が『ポケポケ』以前からトレーディングカードゲームとして存在しているポケモンカードゲーム全体のコンセプトと、2024年にモバイルゲームとしてリリースされた『ポケポケ』のコンセプトを紹介しました。

トレーディングカードゲームのポケモンカードゲームのコンセプト

ポケモンカードゲームは、ゲームソフト『ポケットモンスター』シリーズの世界をテーマにしたトレーディングカードゲームです。これまでに日本や北米、欧州を中心に90以上の国・地域で発売されており、全世界出荷枚数は750億枚以上に達するとのこと(2025年3月末時点)。

ヒットの要因は、対戦ゲームとしての楽しさとカードを集める楽しさを兼ね備えていること。

対戦では60枚のカードで構成されるデッキを使い、カードの組み合わせによって戦略的な対戦を楽しむことができます。

世界中で大会が行われているため、対戦ゲームのイメージが強いかもしれませんが、コレクションも楽しめるプロダクトとしてしっかりと開発・デザインが施されています。

コレクション性を高めるにあたっては、カードのレアリティごとにホログラムの種類や光り方、UV印刷といった特殊加工に変化を付けて、視覚的に各レア度の段階を演出しています。

例えば、C(コモン)、U(アンコモン)、R(レア)、RR(ダブルレア)と、カードのレアリティが高くなるほど見た目のインパクトが増し、リッチな質感が施されています。

Rにはホログラム加工を追加。RRでは、ホログラムの輝き範囲をRよりも増やしている

AR(アートレア)とSAR(スペシャルアートレア)は、ポケモンの生態が感じられるイラストが描かれたカードです。デザインする上ではイラストの見やすさを考慮しながら加工を施しています。

SR(スーパーレア)は、オーバーナンバーの当たり感と図鑑的な役割をもたせるために、キャラクターの特性を理解しやすいポーズでイラストが描かれています。

UR(ウルトラレア)は、最上級の当たりカードになるので、キラキラ感を重視した印刷加工が施されている

ポケモンカードゲームを題材としたモバイルゲーム『ポケポケ』

今回紹介するモバイルゲーム『ポケポケ』は、ポケモン、ディー・エヌ・エー、クリーチャーズの3社共同プロジェクト。ポケモンがパブリッシュと全体をプロデュース、ディー・エヌ・エーがアプリ開発、そしてクリーチャーズがアプリの企画協力とカードゲームの開発を行なっています。

『ポケポケ』のカードは、デジタル表現を加えることができるのが紙のカードとの明確な違いとなります。しかし、開発にあたっては、紙のカードと同等の手ざわり感を持たせることを目指したといいます。

『ポケポケ』では、カードを裏返せる、厚みを持たせるなどの要素を持たせ、ポケモンカードの単なるデジタル版ではなく、独自の魅力がプラスされたカードを創り出すことを目指しました

また、『ポケポケ』の場合は目の前に対戦相手のいない状況でのプレイも想定されたため、そうした状況でもポケモンカードゲーム本来のプレイ感覚を保つことも重視したといいます。

『ポケポケ』独自のデザインフォーマットをイチから設計して、実装

続いてテクニカルアーティストの半田氏より、デジタルカードである『ポケポケ』カードのフォーマット制作について、コンセプトとそれに基づく仕様を中心に解説が行われました。

本講演で紹介されたカードフォーマットの一覧。基本的なものに加えて、特殊な例としてウルトラビーストのフォーマットも紹介された

フォーマット制作の流れは、最初にクリーチャーズがコンセプトとデザインを作成し、それを基にクリーチャーズとディー・エヌ・エーで具体的な実現方法や実装の要件などをすり合わせていきます。

その後、ディー・エヌ・エーがフォーマットを実装し、クリーチャーズのチェックを受けながらブラッシュアップを重ねていきます。

そして最後に、ポケモンとクリーチャーズが監修を行なって完成となります。できあがったフォーマットはテンプレート化させて、カードセットの量産に利用します

本講演では、コンセプトデザインの制作と、その後の実装について、いくつかのフォーマットを例に解説が進められました。

♢(ダイヤ)と♢♢(ダイヤ2)のフォーマットと実装

紙のカードでは、このレアリティが基本のフォーマットとなります。ポケモンやゲームデザインそのものに新たな変化が起きたとしても、それらをポケモンカードゲームとして成立させるカードです。

♢と♢♢のフォーマット。カード右下の説明文によって、そのポケモンの情報が得られることで図鑑的な役割も満たしている

『ポケポケ』での実装

『ポケポケ』でもこのレアリティを基本フォーマットとして成り立たせるという方針は変わりません。

遊びやすいことがフォーマットデザインのコンセプトであり、先述したポケモンカードゲームのフォーマットは遊びやすさを考慮したデザインへとつながっています。

フォーマットの実装要件は、ポケモンカードの基本フォーマットとして「タイプのわかりやすさ」、「イラストの見やすさ」などを満たすということになる

♢と♢♢のフォーマット実装

カードの基礎となる3Dモデルは、厚みのある板形状にすることで、カードを傾けたときやひっくり返したときにかすかに側面が見えるようにデザインされています。

カードに厚みを付けることで、紙のカードのような手ざわり感に近づけることを目指した

ゲームアセットとしてのフォーマット構成

「UI」、「カード枠」、「背景」、そして「イラスト」という4種類でアセットを分けておき、レイヤー上に合成して描画している

「UI」にはHPや技といったマスターデータの情報やローカライズ処理を含むテキストが載っています。ゲーム実行中にそれらの情報を処理して、オフスクリーンレンダリングしたテクスチャをレイヤーとして扱っています。

「カード枠」のアセットは、他のカードやフォーマットでも利用できるように共通化しています。

「背景」についてはタイプごとに共通化。カードアセットの量産では、そのカードのタイプ情報を基にエディター機能によって自動で背景色が選ばれ、アセット化されるというようなフローになっています。

そして「イラスト」は、カードごとに異なるため、そのカード固有のアセットとなります。

このようにレイヤーを組み合わせてアセットを構成することによって、シンプルなデータ構造を実現。開発や量産のフローが組みやすいなどのメリットがあったとのこと。

♢♢♢(ダイヤ3)のフォーマットと実装

基本的な部分は♢、♢♢と共通の設計ですが、チャレンジとなったのがカード枠とイラストに異なるホログラム処理を施したこと。

レアリティが♢♢♢よりも上位のカードには、デジタルの利点を積極的に採り入れていくことで、見た目のインパクトが大きくなっていくだろうと見立てを付けました。

♢♢♢の場合、紙カードにおけるレアと呼ばれるカードよりも、少しビジュアルインパクトを増やした方が『ポケポケ』では全体的なバランスが良くなると判断し、2種類のホログラムを入れるかたちで設計が固められました。

最終的には全レアリティのバランスをとりながら決めていった部分ですが、こうした細かなこだわりが、各レアリティごとの価値を生み出す秘訣になっているそうです。

♢♢♢フォーマットの実装要件。先に紹介した♢、♢♢と同様にタイプの分かりやすさ、イラストの見やすさを実現しつつ、紙のカードと遜色のないホログラムを再現すること

♢♢♢の実装フォーマット

♢、♢♢と違い、2種類のホログラムがカード枠とイラストに加わっています

イラストにかかるホログラムBは、レイヤー構造を採ったことで、差し替えが簡単になっています。そこで、いくつかのホログラムパターンをテンプレート化しておき、イラストに合っているものを選ぶ(実機上で差し替える)というフローが組まれました。

ホログラムについては、紙のカードのホログラム表現を擬似的に表現しています。

紙のカードの場合、カードの表面に当たった光が「回折格子(かいせつこうし)」と呼ばれるフィルムによって波長ごとに異なる方向へ回折することで虹色の反射を起こしています。

『ポケポケ』のホログラム表現では、位相テクスチャを作成。それをシェーダー処理によって疑似的な回折格子による光の干渉パターン、ホログラムの反射を白黒で再現しています。

さらにその結果に対して、グラデーションテクスチャで色を付けることで、プリズム効果を表現しています。

イラストに重なるホログラムBに対しては、マスクで強度を調整することによって、イラスト中のポケモンの視認性を両立させています。

カードが正面を向いた状態ではカード全体にホログラムが入るようにしつつ、どの角度に傾けても色味や強さの印象がバランス良くなることを目指した

☆(星1)と☆☆(星2)のフォーマットと実装

「☆(星1)」と「☆☆(星2)」はイラストがカードの全面に描かれています

☆は、♢、♢♢、♢♢♢の中から選定されたスペシャルアート。☆☆は、♢♢♢♢のうちEXカードと呼ばれるもののなかから選定されたスペシャルアートです。

☆は可愛らしいポケモンを描く機会も多いので、カード枠のデザインは柔らかい印象に見えるものにしました。一方、☆☆は強いロジックが入るカードのため、スマートな印象に見えるカード枠のデザインを採用しています。

フォーマットの実装要件は、「ホログラムの加工表現は、主役のイラストを引き立てるもの」。カードを見た人が真っ先にイラストの魅力に目を奪われるものにすることだ

☆☆の実装については、カード枠とイラストに対して異なるホログラム処理が施されています。

☆☆のフォーマット構成。イラストはフルサイズになっている

イラストにかかるホログラムBの実装では、ホログラムにマスクがかけられています。

シェーダー処理によって、カードが正面を向いているときほどマスクが強くかかるようにすることで、真っ先に主役となるイラストに目を向かせるというコンセプトを成り立たせています。

カードが正面を向いているときはホログラムBに施されたマスクが強くかかるため、主役のイラストがしっかりと見える。傾けたときには全体にホログラムが入り、レアリティの高さを象徴する豪華な印象に仕上げられた

♢♢♢♢(ダイヤ4)のフォーマットと実装

♢♢♢♢(ダイヤ4)カードは、対戦で活躍することが多いカード。そこでポケモン同士の迫力ある戦いや激しく躍動する姿をテーマとしたイラストが描かれるフォーマットになっています。

バトルの緊迫した瞬間を描き出すべく、カードのフレームから飛び出してくるような勢いのあるポージング、鮮やかな技のエフェクト表現、バトルの状況に応じてポケモンたちが見せる表情、さらには存在感が増すような派手で特徴的なホログラム柄が意識的に採り入れられています。

カード全体としてポケモンの持つ強さや迫力、激しさを鮮烈かつ印象的に演出することを目指すのが♢♢♢♢フォーマットのコンセプト

そんな♢♢♢♢フォーマットの要件は、デジタルならではの視差効果によって、より立体的かつ迫力ある演出を実現する複数のホログラムパターンを効果的に組み合わせつつ、カード全体としてポケモンの持つ強さや迫力をより鮮やかに表現することでした。

これまで紹介されたカードとは違い、エフェクトやポケモンの3Dモデル、示唆がある背景イラストのレイヤーを加えることで立体的な見え方を作り出し、コンセプトである迫力やバトル感を演出するための構成となっています。

背景イラストは、カードを傾けたときに奥行きがあるかのような見え方になっています。これはシェーダーによって、カメラ方向やカードの角度を基にテクスチャUVをずらし、仮想的に奥行きを表現しています。

シェーダーには、汎用的なフォーマットを複数利用している

ポケモンの3Dモデルは、Houdiniで作成。基のイラストデータからメッシュを生成し、UVマッピングやテクスチャ素材の出力などもHoudiniで行なっているとのこと。

3Dモデルは、カードのイラスト枠から飛び出すような表現に仕上げられています。

描画する際にステンシル機能を活用することで、3Dモデルが部分的にカード枠で隠れるようになっています。

図の場合、ピカチュウの尻尾の先端や左手がイラスト枠の奧側に隠れるように描画。Houdini上で3Dモデルのポリゴンに対して複数のマテリアルを使い分けることで、イラストワークとの前後関係を設定している

♢♢♢♢フォーマットのホログラムは、背景、カード枠、ex/exルールのUI、ポケモンの目の部分に施されています。これらのホログラムの鮮やかさによっても、♢♢♢♢コンセプトであるポケモンの強さや迫力が表現されています。

カードを傾けると、カード全体で立体的な視差が感じられるのと同時に、さまざまなホログラムの反射が見えるようにデザイン。ポケモンの目がキラッと光ることで、生命感も演出されています。

☆☆(星2)のフォーマットと実装

フルイラストを採用した☆☆(星2)カードのフォーマットは、♢♢♢♢と同様に視差効果を取り入れつつ、それ以上に特別感や獲得したときの当たり感を高めたものとなっています。

全面にイラストが描かれたフルイラストでありながらも、ポケモンの姿形をじっくりと確認したくなるという時間的な要素も大切なコンセプトとなっています。

そこで、バトルシーンに見られる動きの激しいポージングではなく、そのポケモンが本来持っている体の特徴や体型、ディテールなどが把握しやすい、落ち着いたポーズや角度を採用したイラストが描かれています。

紙のカードでは、こうしたレアリティならではの素材や加工に工夫を重ねることで、ハイレアリティカードらしい見た目や手触りを実現してきました。

そうした考え方は『ポケポケ』でも変わっていません。視差効果をはじめ、派手なホログラム柄やキラエフェクト、ポケモンのイラスト部分を縁取る金のアウトラインなどを駆使して、ハイレアリティ感がしっかりと演出されています。

☆☆カードのフォーマット構成

ホログラム処理は、「カード枠」、「ポケモン」「背景イラスト」の3ヶ所。

カード枠のホログラムには細かいパターンを敷き詰めて、より豪華な印象に

☆☆カードもポケモンは3Dモデルで表現。ただし、フルイラストの3Dモデルでは、ポケモン全体にホログラムを入れた、アウトライン表現が施されています。

ホログラムはカードを傾けているときにだけ反射するように処理。カードが正面を向いているときはポケモンの特徴をしっかりと見せつつ、傾けたときにレアリティの高さがさらに伝わることが目指されました。

アウトラインはマスクテクスチャによってイラストの輪郭を指定し、金色にメタリックな反射をするようなシェーダー処理を設定しています。

ウルトラビーストの☆☆(星2)フォーマットと実装

ウルトラビーストの☆☆(星2)カードのフォーマットでは、傾けると背景が動くようになっています。これによりウルトラビーストが特別なポケモンであることを表現。

ウルトラビーストのキャラクター性として、不穏さや禍々しい雰囲気を表現。ただし、手に入れたい、コレクションしたいと感じられるカードとしても成り立たせることを目指しフォーマットが固められました。

『ポケポケ』では、ウルトラビーストのカテゴリーバーの模様を背景イラストにも大胆に取り入れています。カードを傾けた際に背景の模様が変化するデジタル演出を施すことで、ウルトラビーストならではの雰囲気とハイレアリティカードとしての特別感、その両方を強く感じられるように仕上げました。

ウルトラビーストの☆☆カードのフオーマット構成

通常の☆☆と基本的には同じ構成ですが、UIにウルトラビーストと書かれたカテゴリーバーを追加、背景イラストにはアニメーションするマーブル柄を採用しています。

マーブル柄の背景イラストは、有機的過ぎたり、禍々しさが出過ぎると不快な印象になってしまうため、コレクションしたいと感じさせることにも配慮しました。

アニメーションは、ドロっとした液体が流れるような、有機的な動きを採用。カードを傾ける方向によって、異なる印象に仕上げられています。

そうしたマーブル柄に沿った発光や、カード枠の周辺ほど暗くなるというビネット効果を加えることで、怪しさ、不穏な印象を演出しています。

マーブル柄の背景イラストの制作では、最初にディー・エヌ・エーとクリーチャーズとで完成イメージをすり合わせました。

フォーマットのコンセプトやリファレンスを共有しながら、対面で話しながら完成イメージを細かくすり合わせていった

アニメーション方法については、カードの傾き方向、角度に応じてグラフィックが変化し続けること、カードを正面方向に戻すと最初の見た目に戻ることの2点を念頭に、実装方法を検討。

最初に考案されたのは、フローマップなどによるUVスクロールです。

UVの変形によってデクスチャーを歪め、マーブル柄を表現できるのではと考えたそうですが、カードの傾きに合わせてさまざまな方向にUVを移動させつつ、マーブル柄を破綻させないようにするのは難易度が高そうでした。

また、フローマップでよく用いられるアニメーションを透過によってループさせるという手法も物理的に不自然に見えがちであり、カード表現としての一貫性や手触り感が遠ざかることも懸念されました。

次に思いついたのはフィードバックエフェクト。再帰的にアニメーションを更新していくことで、液体のような表現ができるのではと考えました。

しかし、こちらも制約としてあったカードを正面方向に戻した時に、自然に最初の見た目に戻すということが難しく感じられました

そこで改めてリファレンスやリキッドライトショー(※)の映像を見返したといいます。
※ VJなどに用いられるアナログな映像パフォーマンスの一種で、透明な板の上にインクを流し込み、それらのインクの色や動きを照明光で投影するというもの

これらを見返した結果、「インクが流し込まれ、その領域が広がる」「領域同士がつながったり押し合ったりする」という2つの特徴を実現させることを思いついたそうです。

領域を区切るように色付けていく手法には、セルラーノイズが使えるのではないかと考えました。

セルラーノイズのシェーダー(※)をベースに実装していくことによって、完成イメージへと近づけていきました。
※ 初めにポイントをいくつか配置しておき、ピクセルシェーダーで、そのピクセルから各ポイントまでの距離を計算。1番近いポイントとの距離を基に色を決定する

セルラーノイズシェーダー。ポイントに近いピクセルは赤く、遠いピクセルは黒くなっている

このセルラーノイズシェーダーをベースに、領域の広がりなどが表現できるマーブルシェーダーが実装されていきました。

マーブルシェーダーの基本的な仕組みは、セルラーノイズと同様にポイントを配置したうえで、そのポイントに影響度を持たるというもの。ピクセルは一番近いポイントだけでなく、複数のポイントとの距離と影響度を基に色を決定していきます。

例として、プラスとマイナスを赤と青で表現

そこへさらにUVシェーダーやラジアルシェーダーといった、歪みの機能を追加。

マーブルのシェーダー処理でピクセルとポイントの距離を測る前に、ピクセルの位置を仮想的に移動させることで歪みの表現をしています。

領域が歪むことで、有機的な印象が増した

そこへテクスチャリングを施します。上述した実装によって、ポイントから広がる影響値が青から赤のグラデーションになっていました。その値をテクスチャUVとして扱い、赤と黒のテクスチャから色を取得することで、山に等高線が引かれるようなイメージでマーブル柄を作り出しています。

仕上げに、動きにドロッとしたニュアンスを加えます。

マーブル柄を表現するためのパラメータであるポイントの配置と影響度、歪みをカードの傾きに合わせてコントロールすることで、マーブル柄の動きを作り出しました。

その動きをドロッとした印象にするために、パラメータのコントロールにPD制御というフィードバック制御を用いることでアニメーションの出発と到着に遅延を生じさせています

カードの傾きに合わせてポイントを移動している様子。緑のポイントが遅延なし、赤のポイントが遅延ありのもの。静止画ではわかりづらいのだが、ポイント位置の遅延の度合いがビジュアルにも反映される仕組みとなっている

そしてクリーチャーのチェックを通してブラッシュアップが重ねられました。

マーブルの発生源や細い線が連続する部分は、有機的な印象が強く出過ぎて、不快感につながる恐れがあるため、そうした箇所にディスプレイスメント処理などを追加して、印象を調整しました。

さらに、カードをどの方向に傾けてもアニメーションのスピードや尺が一定の範囲内に収まるようにも調整。

マーブル柄のアニメーションについては、表現の大半をアセットベースではなくジェネラティブな手法を用いているため、意図した動きやビジュアルを作ったり微調整をするのが大変にはなったそうです。しかし、その分有機的でウルトラビーストらしい印象に仕上げることができたとのこと。

色違い1・色違い2のフォーマットと実装

紙のカードゲームのほうでは、基本的にゲームソフト『ポケットモンスター』シリーズ本編を踏襲した設計が行われています。そのため、ゲームソフトで採用されている色違いポケモンの登場エフェクトを同シリーズの色違いカードにも取り入れるという方針の下、フォーマットのデザインが行われています。

一方、『ポケポケ』はゲームソフトのシリーズを踏襲した商品設計ではないため、『ポケポケ』オリジナルの色違いポケモン登場エフェクトを新たにデザインするという考えでフォーマットデザインが行われました。

色違い1・色違い2のカードのデザインフォーマットは、色違いポケモンが登場するその瞬間の演出をコンセプトとしています。

色違い1・色違い2のフォーマット実装

フォーマットの実装要件は、「ポケモンの体色が鮮明かつ視認性が高く、誰が見ても印象的でわかりやすい表現となっていること」「このカードだからこその表現によって、希少性やプレミア感を持たせること」の2点です。

色違い2のフォーマット構成。☆☆のフォーマット構成をベースに、「トレイルキラ」「プヨキラ」「プリズム」「ミラーボール背景」といった色違いカード特有のフォーマットの表現が追加された

色違いカード特有の表現についてもウルトラビーストと同様に、「カードの傾き具合、方向に合わせてグラフィックが変化し続ける」要素が採用されています。ただし、「カードを正面方向に戻したときには、最初の見た目に戻る」といったルールを徹底しています。

半田氏より実装に用いられた具体的な技法が紹介されました。

プリズム表現

カードを傾けると中心からプリズムが飛び出す。アニメーションの到着タイミングをずらしたり、飛び出す距離に応じて光の分光を変化させたりと、自然な演出となるように調整された

まずは、プリズムを描画するためのメッシュをHoudiniで作成します。

円状にポイントを並べつつ、ノイズトップなどによって自然な配置になるよう調整。そのポイントに対してグリッドを自動で配置し、UVを割り当てます。

各頂点データには、その頂点が所属するグリッドの中心座標を格納しています。

Houdiniの[Measure]SOPノードによってグリッドごとに重心を計算。それを各頂点に渡し、UV2として格納してメッシュを出力しています。

このようにパーツの中心位置を各頂点が持っておくことで、頂点シェーダーによるパーツごとのアニメーションが作りやすくなっています。

生成したメッシュをUnityに読み込み、頂点シェーダーでグリッドを移動させます。

頂点に付与しておいたグリッドの中心を移動方向の計算に利用することで、グリッドの形やサイズを変えないまま外側に飛び出すような動きにしています。また、スクリプトによってカードの傾きに応じて飛び出すという制御も施されています。

プリズムのテクスチャリングについては、メッシのUVを基にテクスチャから色を取得しています。

プリズムが飛び出すアニメーションと同時に、テクスチャのRGBの取得値を少しずらすことで、分光しているような印象に仕上げられている

また、色の補間にはOkLab色空間を利用。明度と彩度を知覚的に均一に保ったまま色素の補間ができるため、フォーマット全体としてのなじみが良く感じられるといいます。

ミラーボール背景

小さい円盤が敷き詰められており、カードの向きが変わると反射している円盤が切り替わっていくというものです。

紙のカードのようなキラキラした印象に近づけるべく、メタリック感が演出されている

カードが正面を向いたときは再現性が担保された同じ見た目にするため、カードの角度に応じて光り方が一意に決まり、ランダムに一定の変化をし続けてるように見えるという仕組みを実装しました。

ミラーボールのシェーダー処理

  1. カードの傾き方向を取得する
  2. その傾き方向を基に角度反射マップテクスチャから値を取得し、反射インデックスという0から1の値に変換する
  3. ミラーボールテクスチャを利用し、Rチャンネルには円盤の形状マスク、Gチャンネルには円盤ごとにランダムな反射インデックスの値を入れる。シェーダーでミラーボールテクスチャから反射インデックスを取得して、<2>で変換してきた反射インデックスと近い値であった場合は、そのピクセルを反射させる

<3>では、同時に形状マスクをかけることで円盤の形を作成しています。

以上の流れによって、角度に応じて一意に光り方が決まりつつも、ランダム感があり、動きに対して一定量の変化をし続ける表現に仕上げられました。

角度反射マップとミラーボールテクスチャの作成

角度反射マップとミラーボールテクスチャはHoudiniで作成しています。

角度反射マップについては、ノイズのテクスチャなども試したそうですが、変化が急すぎたり、変化しないタイミングがあるなど、カードの動きに対して変化量にムラがあったため不採用に。

カードをぐるぐると回転させても、傾き具合を変えても、無駄なく一定量変化し続けるようにマッピングを試行錯誤して、最終的に渦のようなテクスチャが作成されました。Houdini特有のプロシージャルな仕組みを用いることで、パラメトリックなテクスチャや、色違い1と色違い2といった複数パターンの制作を効率的に行えたそうです。

ミラーボールのテクスチャ生成手順

<1>の処理で[Copy to points]SOPノードを使い、円盤を敷き詰めて配置。それぞれの円盤には、0から1のランダムな値を反射インデックスアトリビュートとして付与しておきます。

<2>では、テクスチャ解像度と分割を揃えたグリッドを作成して、ミラーボールドを重ねて配置。その後、[Attribute transfer]ノードで現場の形状と反射インデックスをグリッドに転写して、それをカラー化しています。

Gチャンネルはシェーダー処理上、形状マスクよりも大きく覆っている必要があるため、ノードの[Distance threshold]パラメータを調整して隙間のないように転写します。

そして最後にグリッドをテクスチャ化します。

今回は[Top to generator]ノードでグリッドジオメトリをインポートして、プリミティブごとのカラーアトリビュートをピクセルに変換することでテクスチャ化させている

さらにホログラムやメタリック感のシェーダーを組み合わせることで、紙のカードのようなキラキラ感が目指されました。

トレイルキラ

「トレイルキラ」とは、カードを傾けるとキラが回転しながら半円状に動き、そのトレイルが軌道を辿るというものです。

トレイルキラ表現は、専用に開発したスクリプトとシェーダーによって制御しています。

まずはキラ表現の検討が行われました。初期実装の段階では立体的な表現にしていましたが、カード全体としてあまり馴染まず、独立したエフェクトのように見えてしまっていました。

左端が初期実装の段階の立体的な表現

そこで平面的な表現に変更し、ビルボードなどの三次元的な表現も使わないようにしました。

エフェクトが平面的に見えてしまうことは一般的に避けたいものですが、『ポケポケ』カードの表現としての一貫性が保たれ、本タイトル特有のリアルさや手触り感に近づけることができたそうです。

キラが描画されるまでの仕組み

描画に使用するメッシュは、グリッドを重ねてワンメッシュにしてあります。シェーダーアニメーションのために、グリッドごとにプリミティブIDを持たせています。

キラが回転して描画するまでの手順

  1. スクリプト処理。カードの傾きを基にプリミティブの回転などを計算し、マテリアルにパラメータを渡す。制御の内容としては、カードが傾いている間はゆっくり回転、カードが正面を向いているときはキラが最初の見た目と一致するように逆算して減速する
  2. 頂点シェーダーでプリミティブIDを基に受け取ったパラメータを参照し、回転アニメーションが施される
  3. 回転したプリミティブに対して、フラグメントシェーダーでテクスチャリング、明るさなどを調整

トレイル表現

単純なトレイルではなく、カメラレンズで発生する光の効果のような印象も目指してブラッシュアップが重ねられました。

トレイルの形状は、軌道を辿るという役割をしつつ、常に終端に向かって細くなるように調整。軌道の折り返し部分を細くしたり、進行方向にも細い形状が飛び出すようにされました。

また、カードを速く動かしたときも、2つのトレイルが重ならないようにするために、明るさや太さのパラメータは時間だけでなく距離に応じても減衰させています。それらの減衰が滑らかに両立するように調整されました。

トレイルの描画の仕組み

最初に、描画するための円状のメッシュを作成します。今回は、トレイルの経路があらかじめ決まっていたため、メッシュの動的な生成や変形は必要ありませんでした。

そこでメッシュにトレイルを載せるような描画方法が用いられました。

  1. スクリプト制御でカードの傾きを基にキラの軌道や減衰の処理。円周上の各頂点に対する明るさパラメータを計算し、メッシュの頂点データを更新することで受け渡す
  2. 頂点シェーダーの処理では、その明るさパラメータでUVスケールを除算。UVでテクスチャを取得する際、UVスケールが小さくなった部分のトレイルは太くなり、UVスケールが大きい部分のトレイルは細くなるように調整
  3. 実際にテクスチャを取得した結果

プヨキラ

「プヨキラ」はカードを傾けるとプヨプヨと動くキラのアニメーションです。

スケールアニメーションには、UnityのAnimationCurveを利用しています。

カードの傾きに応じてカーブからスケール値を取得し、頂点シェーダーでスケーリング。カーブを利用することで自由度が高く、直感的に調整できるようになった

今回は色違い2のみが紹介されましたが、色違い1も同様の実装を行なっているとのこと。

本講演で紹介されたカードのフォーマット一覧

Houdiniによるプロシージャルな自動処理を積極的に活用する――2Dイラストからのメッシュ生成ワークフロー

長屋氏と半田氏によるカードのデザインフォーマットとその実装についての紹介に続き、廣田氏よりアーティストワークの一例として、デジタルカードのメッシュ制作の課程が紹介されました。

デジタル表現の実装を行うにあたっては、パックごとのリリースカードが多数あるため、アセット制作の物量をどう裁くのかが課題になったといいます。

これを解決するために、Houdiniを使ったカード自動生成ワークフローを構築し、アーティストが表現のブラッシュアップを行うための時間をできるだけ確保することを目指しました。

アセット制作の全体ワークフロー

まず、フォットショップからは各レイヤーをPNG形式で出力、描画視点などの付属情報についてはJSON形式で出力します。

それらをHoudiniへ読み込み、PNGのポリゴン化、試作用の奥行き設定、マテリアルの付与、パース補正といった形状の生成を行います。

続いてシェーダー用のテクスチャを作成。テクスチャパッキングなどの描画要素材の生成を行います。その際、細かな部分については非破壊ワークフローで調整を施し、FBXとPNGでUnityへ出力するというものです。

デジタルカードの制作に、アーティストが使用するツールはPhotoshop、Houdini、Unityの3つに絞ることでデータ変換などの手間を省力化している

①Photoshopの工程

最初にポケモンのイラストをどのように立体化させるのかクリーチャーズとディー・エヌ・エーで協議し、レイヤー構成が決められます。

イラストが完成したら、Photoshopのスクリプトで頭、腕、足など各部位をレイヤーごとにPNG形式で出力します。

出力は、原画、塗り、線画の3種類それぞれでレイヤーごとに書き出します。それと並行して、レイヤーに設定されている加算や半透明などの描画情報はJSON形式で書き出します。

ポケモンイラスト以外の背景イラストやエフェクトといったレアリティ表現に必要な素材も適宜出力します。

②Houdiniの工程

シェーダー用の画像加工はPhotoshopでは行わず、Houdiniによるコンポジットで行います。そのためPhotoshopのスクリプトは基本的に、必要なレイヤーの表示/非表示を行うといったシンプルな実装となっているそうです。

Houdiniの工程では、「ポリゴン化→マテリアルの付与→パース補正→テクスチャ画像の生成」という一連の作業についてはプロシージャルによる自動処理が施されるワークフローを構築しています。

ポリゴン化

まずイラストの2D画像からポリゴン化を行います。Photoshopから出力されたPNGを読み込み、下のレイヤーから順に[Trace]ノードでポリゴン化して、3D空間上に奥から配置していきます。

この段階である程度の奥行きを設定しておくことで、アーティストがイチから作業を始めるよりも手早くブラッシュアップ作業に着手できるように配慮されています。

奥行きの強度については、コンセプトの段階でクリーチャーズと検討を行い、紙のカード感を残しつつも視差が感じられる深度へと決めていったそうだ

マテリアルの付与

マテリアルの付与は、[Python]ノードでPhotoshopのレイヤー描画指定を出力したJSONを参照し、設定を行います。

この段階で加算や半透明などのマテリアルが各部に設定されます。その後、カードのフレームとの交差判定を行い、カード枠より手前に描画する部分と奥に描画する部分のマテリアル設定を行なっていきます。

作業中はマテリアル名のポリゴングループのみを作成しており、エクスポート直前にグループに対して実マテリアルを付与しています。

グループはHoudini内のほぼすべてのノードで対応しており、ワイルドカードを使ったリネームといったHoudini側での制御もサポートされていて利便性が高いため、最後までこのグループを維持しながら処理が行われていきます。

パース補正

3D空間上で奥行きをつけると、カメラビューではカメラに近い部分が大きく写ってしまいます。

そこでカードを正面から見たときはイラスト本来の見た目を再現するために、[Wrangle]ノードを使い、フリーのスクリプト言語VEXでパース補正を行なっています。

カメラは正面から撮影しているため、単純にカメラからの距離によって各ポイントのスケール値を計算し設定。この仕組みを入れておくことで、アーティストは元となるイラストとのズレを気にせずに安心してポイント単位で奥行きの調整が行えるようになりました。

テクスチャ画像の生成

アウトライン用のマスクやホログラムなどのシェーダー用の素材は、ノードベースで画像加工を行えるCOPを使って作成。

テクスチャパッキングにはUVレイアウトノードを使用し、ポリゴン化したイラストを最終テクスチャサイズのグリッドに詰め込みます。

レイアウト実行後に元イラストの各レイヤーがどこに移動したかを計算し、COPでも画像加工後に同様の移動を行い、最終的にUnityに渡すパッキングテクスチャを作成します。

またエフェクトについては、各素材をRGBチャンネルに埋め込んで統合。COPはチャンネルごとの操作などが容易に行えるため、ジオメトリーとの連携もとりやすく、シェーダー用の素材作成に適しているそうです。

当初は、こうした画像処理をPhotoshopのスクリプトで行なっていたそうですが、Houdini上でCOPによる自動処理へと変更したことで、元のPhotoshopスクリプトの3分の1を占めていた複雑な画像加工のコードが不要となり、メンテナンス性が高くなったといいます。

さらに、COPノード上には各段階の処理内容がサムネイルで表示されるため、スクリプトをブレイクポイントで止めて確認する必要がなくなり、デバッグや調整作業も楽になったそうです。

③アーティストによる手作業の調整

これ以降からは自動処理後に、アーティストが手作業で調整するものとなります。

クオリティを上げていくには、部位ごとに細かい調整が必要です。ただし、イラストの調整やパラメータの数値が変更された場合も、編集内容が壊れないように選択エリアを作成しておき、非破壊で調整できる仕組みが構築されています。

視差の調整では、ポケモンの各部位ごとに奥行き感を調整

描画に関するポリゴン数の調整やUVパッキングのスケール、イラストをトレースする際のアルファの閾値などもパラメータで細かく調整を行なっていきます。

レアリティごとに出力素材の違いなどはありますが、視差のあるカードについては基本的に以上のワークフローで制作しているとのこと。

元となるイラストからメッシュ生成、テキスチャ作成までが自動的に行われるため、初稿を出力するまでの時間を節約できる

Houdiniによるプロシージャル処理を巧みに取り入れることで、アーティストが表現の調整に時間を費やすことができるようになりました。

プロジェクト初期はMayaを使ったワークフローだったそうですが、Houdiniを導入したことで工数を約60パーセント削減することができたといいます。

さらにCOPによる画像の自動処理を採用したことで、Photoshopスクリプトのコード量の削減とメンテナンス性も向上しました。

カードの見た目と姿勢をそれぞれ独立して制御する――ランタイムでのデジタルカードの扱い方

最後にグラフィクスエンジニア山本氏より、作成したデジタルカードのゲームランタイムでの取り扱い方が紹介されました。

くり返しになりますが、『ポケポケ』のデジタルカードは、カードごとに独自のホログラム処理や視差表現などを有した、厚みのあるカードとして制作されています。

ランタイムでは、演出的にこれらのカードを自由に動かせることが求められました

カードはパックの開封やバトルのほかにも、トレードやゲットチャレンジなど、さまざまなシーンや演出で登場します。こうした各種演出ごとに、カードの動き方もさまざまです。

また、シーンでのカードの動きに合わせて、ホログラムなどの表現も連動して動かす必要があります。

しかし、作成したデジタルカードを3D空間で自由に動かした場合、さまざまな問題が生じたそうです。

例えば、実際のゲーム中では動かせない範囲までカードを傾けると、ピカチュウのカードでは発光エフェクトが意図した以上にキャラクターを隠してしまいます。また、ファイヤーのカードの場合、ホログラム表現がキャラクターの上にまでかかり、強く表示されてしまいました。

ピカチュウのカードの例(左)とファイヤーのカードの例(右)

意図しない見た目になることを避けるためにカードを動かせる範囲を制限してしまうと、ランタイムの演出中では自由にカードを回せないなど、利用できる演出の幅が狭まってしまう弊害が起きてしまいます。

この課題を解決するために、カードの姿勢とその時のカードの見た目をそれぞれ独立して制御することが『ポケポケ』の実装では求められました。

カードの姿勢と見た目をそれぞれ独立して制御することができるようになれば、カードを3D空間内では自由に動かすことができるのと同時に、カードの見た目についてはカードがどのような姿勢であっても意図したホログラムや視差表現にすることができます。さらにある程度は、カードの見た目がカードの動きに連動して変化するといったことも達成できます。

そのような仕組みとして、『ポケポケ』ではオフスクリーンレンダリングを活用する方法が考案されました。

今回実装した3Dデジタルカードにおけるオフスクリーンレンダリングでは、カードの厚みを活かすために、カードの表面だけにオフスクリーンレンダリングを活用しています。

厚みがあるカードモデルの表面に対して、オフスクリーンレンダリング用の板ポリゴンを用意し、その板ポリゴンに対して、別途用意した専用の空間で撮影したカードの見た目を適用しています。

撮影されたテクスチャは、わかりやすくするために外側を真っ黒にしてあるが、実際のゲーム中では透明な領域としてシェーダーで処理している

さらに色違いのポケモンなど、カードによってはエフェクトなどの一部要素がカードの外側に出てくることもあるため、オフスクリーンレンダリング用のポリゴンはカードそのものの形に対して一定の余白を持たせて作成してあります。

また専用の空間でカードを撮影する際、カードが傾いているとパーツがかかった状態で撮影されています。元のカードの形から変化していることが分かります。

それぞれ異なる姿勢のカードを撮影したもの。正面からの見た目(左)は長方形のようなシルエットだが、傾いた姿勢で見ると台形のようになっている(右)。さらにカード左側が手前に来たことで、大きく撮影されている

この状態でテクスチャのオフスクリーンレンダリングを適用すると、演出用モデルのカードの形と撮影したカードのイラスト部分がずれたおかしな見た目になってしまいます。

そこで、オフスクリーンレンダリングをするにあたり、今回は撮影したテキストのイラスト部分の形がカードモデルの形に揃うように、テクスチャのUVを補正しながらレンダリングを行うように実装されました。

射影変換を使った補正。それぞれ異なる姿勢で撮影したカードを適用した3Dモデルが、最終的にシーン中で正面から見たときの見た目に変更されている

最終的には、オフスクリーンレンダリングをするにあたって、カードごとに基準の姿勢を決めておき、演出用のカードの姿勢が基準の姿勢に対して一定の範囲内では、演出用のカードと撮影用のカードの姿勢を連動させます。

逆に演出用のカードの姿勢がカメラに対して横向きなど一定の範囲内を超えてしまう場合は、撮影用のカードは一定の範囲内にその姿勢を抑えて撮影しています。

このような実装によって、ホログラムや視差表現が、カードがどのような姿勢であっても破綻することなく、常に意図した姿勢を保つことができるようにされました。

3Dシーン中でも自由な動きをさせることのできるデジタルカードを実現

この手法は、カードの種類や演出の種類に依存せず、さまざまな演出で汎用的に利用

最後に本セッション内容のまとめが紹介されました。

『ポケポケ』におけるデジタルカード表現の中で、表現、開発・制作環境、ランタイムという3つのテーマから、それぞれにおける取り組みが紹介された

長屋氏より「『ポケポケ』では、今後もこれらのこだわりを持って開発を続けていきます。ぜひ今後もさまざまなカードに触れて楽しんでいただければ幸いです」という言葉をもって本講演は終了しました。

『Pokémon TCG Pocket』公式サイトPokémon TCG Pocketにおけるデジタルカード表現とその制作手法 - CEDEC2025
NUMAKURA Arihito

フリーランス編集者&ライターほか。総合商社プラント営業>CM系オフラインエディター>CGWORLD>Vook>独立。Hello, I’m a Japanese editor focus on film, video & digital contents.

https://www.linkedin.com/in/arhtn3109/

関連記事

『ウマ娘』ゲーム外の映像制作での課題を解決する、映像特化専用ツールの開発事例【CEDEC2025】
2025.08.04
ブラウザで動作する3Dアプリ制作ツール「PlayCanvas」、エディター部分がオープンソース化。MITライセンスのもと使用可能
2025.07.31
【CEDEC2025】登壇者が公開したフォローアップ記事・講演資料まとめ(随時更新)
2025.07.31
3Dスキャン体験イベント「3DSCAN MEETUP in SHIZUOKA」講演資料が公開。フォトグラメトリ・3DGSによる歴史的建築のデジタルアーカイブ化事例など
2025.07.30
肩の可動域が3Dアクション・感情表現を豊かにする。『GUILTY GEAR Xrd』シリーズから学ぶボーン配置TIPS、アークシステムワークスが動画で解説
2025.07.28
Blenderがタブレットデバイスに対応へ。まずはiPad Pro版を開発中、将来的にAndroid端末などもサポート予定
2025.07.28

注目記事ランキング

2025.07.28 - 2025.08.04
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

ローパスフィルター(Low-Pass Filter)
ローパスフィルター
  1. 電気信号のうち、指定した周波数(カットオフ周波数)以下の信号を通し、それより上を大きく低減させるフィルター。
  2. ゲーム開発において、基本的にはサウンド用語として用いられる。例として、特定のセリフをローパスフィルターによってくぐもった音に加工することで、隣の部屋や遮蔽物の後ろで話しているかのような表現を行うことができる。
VIEW MORE

Xで最新情報をチェック!