WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

Cocos2d-x の EditBox で複数行表示する

おつかれさまです。エンジニアの藤澤です。

最近 Cocos2d-x の EditBox で比較的長い文章を入力したいケースがあったのですが、標準の EditBox では複数行表示に対応していないようで、文章が見切れてしまったため少々手を加えて対応しました。今回はそのときの内容を書いてみようと思います。

この記事は Cocos2d-x v3.2 をもとに書いていますが、v3.9 からは標準で複数行に対応しているようです(泣)

f:id:wp-fujisawa:20170718173454p:plainf:id:wp-fujisawa:20170718173502p:plain

下準備

標準の EditBox に手を加えるのに抵抗がある場合、自分の project に EditBox をコピーして標準のものと使い分けるのも手だと思います。必要なファイルは以下のとおりです。

  • extensions/GUI/CCEditBox/CCEditBox.h
  • extensions/GUI/CCEditBox/CCEditBox.cpp
  • extensions/GUI/CCEditBox/CCEditBoxImpl.h
  • extensions/GUI/CCEditBox/CCEditBoxImplIOS.h
  • extensions/GUI/CCEditBox/CCEditBoxImplIOS.mm
  • extensions/GUI/CCEditBox/CCEditBoxImplAndroid.h
  • extensions/GUI/CCEditBox/CCEditBoxImplAndroid.mm

コピーしたらまず namespace を独自のものに変更します。おもに NS_CC_EXT_BEGINNS_CC_EXT_END のところを変更するのと、それに伴いコンパイルエラーになるところを直してあげればよいです。

#define getEditBoxImplIOS() ((cocos2d::extension::EditBoxImplIOS*)editBox_)

のところも忘れずに……。

つぎに、CCEditBoxImpl.h の以下の関数を、自前の EditBoxImpl を返すように変更してやります(iOS, Android とも)

extern EditBoxImpl* __createSystemEditBox(EditBox* pEditBox);

最後に、CCEditBoxImplIOS.h の CCCustomUITextField, CCEditBoxImplIOS_objc が二重定義で怒られるのでいったんコメントアウトしてオリジナルの方を見るようにしておきます(あとで変更しますが)

iOS

iOS では内部的に UITextField を使用しているため、 UITextView を使うように変更します。

- @interface CCCustomUITextField : UITextField
+ @interface CustomUITextField : UITextView

これにあわせて UITextFieldDelegateUITextViewDelegate に変更します。

- @interface CCEditBoxImplIOS_objc : NSObject <UITextFieldDelegate>
+ @interface EditBoxImplIOS_objc : NSObject <UITextViewDelegate>

また、 UITextFieldUITextView で互換性のないところも適宜変更します。

        [textField_ setTextColor:[UIColor whiteColor]];
        textField_.font = [UIFont systemFontOfSize:frameRect.size.height*2/3]; //TODO need to delete hard code here.
-         textField_.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
        textField_.backgroundColor = [UIColor clearColor];
-         textField_.borderStyle = UITextBorderStyleNone;
        textField_.delegate = self;
        textField_.hidden = true;
        textField_.returnKeyType = UIReturnKeyDefault;
-         [textField_ addTarget:self action:@selector(textChanged) forControlEvents:UIControlEventEditingChanged];
        self.editBox = editBox;
- - (BOOL)textFieldShouldBeginEditing:(UITextField *)sender
+ - (BOOL)textViewShouldBeginEditing:(UITextView *)sender
- - (BOOL)textFieldShouldEndEditing:(UITextField *)sender
+ - (BOOL)textViewShouldEndEditing:(UITextView *)sender
- - (BOOL)textField:(UITextField *) textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
- {
-     if (getEditBoxImplIOS()->getMaxLength() < 0)
-     {
-         return YES;
-     }
-     
-     NSUInteger oldLength = [textField.text length];
-     NSUInteger replacementLength = [string length];
-     NSUInteger rangeLength = range.length;
-     
-     NSUInteger newLength = oldLength - rangeLength + replacementLength;
-     
-     return newLength <= getEditBoxImplIOS()->getMaxLength();
- }
+ - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text
+ {
+     if ([text isEqualToString:@"\n"])
+     {
+         [textView resignFirstResponder];
+         return NO;
+     }
+     
+     if (getEditBoxImplIOS()->getMaxLength() >= 0)
+     {
+         NSUInteger oldLength = [textView.text length];
+         NSUInteger replacementLength = [text length];
+         NSUInteger rangeLength = range.length;
+         
+         NSUInteger newLength = oldLength - rangeLength + replacementLength;
+         
+         if (newLength > getEditBoxImplIOS()->getMaxLength())
+             return NO;
+     }
+     
+     [self textChanged];
+     
+     return YES;
+ }
void EditBoxImplIOS::setPlaceHolder(const char* pText)
{
-     _systemControl.textField.placeholder = [NSString stringWithUTF8String:pText];
    _labelPlaceHolder->setString(pText);
}

このままだと EditBox の領域外をタップしてもフォーカスが外れないので、platform/ios/CCEAGLView.mm をちょっといじってやる必要があります。

- if([view isKindOfClass:NSClassFromString(@"CCCustomUITextField")])
+ if([view isKindOfClass:NSClassFromString(@"CCCustomUITextField")] || [view isKindOfClass:NSClassFromString(@"CustomUITextField")])

これで入力中のテキストが折り返し表示されるようになりましたが、編集モードを終わるとテキストがセンター寄せ & 見切れてしまいますので、表示を調整します。

    _label = Label::create();
    _label->setAnchorPoint(Vec2(0, 0.5f));
    _label->setColor(Color3B::WHITE);
    _label->setVisible(false);
+    _label->setDimensions(size.width - CC_EDIT_BOX_PADDING * 2, size.height - CC_EDIT_BOX_PADDING * 2);
    _editBox->addChild(_label, kLabelZOrder);
    
    _labelPlaceHolder = Label::create();
    // align the text vertically center
    _labelPlaceHolder->setAnchorPoint(Vec2(0, 0.5f));
    _labelPlaceHolder->setColor(Color3B::GRAY);
+    _labelPlaceHolder->setDimensions(size.width - CC_EDIT_BOX_PADDING * 2, size.height - CC_EDIT_BOX_PADDING * 2);
    _editBox->addChild(_labelPlaceHolder, kLabelZOrder);

これでいい感じに表示されるようになりました。

Android

Android のほうは入力中のテキストは標準で折り返し表示されるので、編集モード以外の表示を調整してやれば OK です。

    _label = Label::create();
    _label->setSystemFontSize(size.height-12);
    // align the text vertically center
    _label->setAnchorPoint(Vec2(0, 0.5f));
    _label->setPosition(Vec2(CC_EDIT_BOX_PADDING, size.height / 2.0f));
    _label->setColor(_colText);
+     _label->setDimensions(size.width - CC_EDIT_BOX_PADDING * 2, size.height - CC_EDIT_BOX_PADDING * 2);
    _editBox->addChild(_label);
    
    _labelPlaceHolder = Label::create();
    _labelPlaceHolder->setSystemFontSize(size.height-12);
    // align the text vertically center
    _labelPlaceHolder->setAnchorPoint(Vec2(0, 0.5f));
    _labelPlaceHolder->setPosition(Vec2(CC_EDIT_BOX_PADDING, size.height / 2.0f));
    _labelPlaceHolder->setVisible(false);
    _labelPlaceHolder->setColor(_colPlaceHolder);
+     _labelPlaceHolder->setDimensions(size.width - CC_EDIT_BOX_PADDING * 2, size.height - CC_EDIT_BOX_PADDING * 2);
    _editBox->addChild(_labelPlaceHolder);

以上です。

Unity ShurikenのSubEmitterを使った季節の風物詩

デザイナーの宮澤です。 

ですね!

といったことでUnityのshurikenを使って簡単な花火を打ち上げようと思います。

テクスチャは用意せず、主にSub Emitterを活用して、

簡単に機能紹介ができたらと思います。

 

1.花火の元を作る。

メニューのGameObjectからParticle Systemを選択します。

f:id:wp_miyazawa:20170706112333p:plain

するとScene内に花火の元(Particle System)が生成されます。

ここから花火っぽくしていきます。

 

2.打ち上がりを作る。

花火の元を準備できたので、早速打ち上げていきます。

作成した状態ですでにたくさん打ちあがっています。

f:id:wp_miyazawa:20170706142739g:plain

ですがこのままだと花火っぽくないので、

尾をひくようにしていきます。

 

まず、Hierarchy内のParticle Systemを選択し、

Sub Emittersにチェックを入れます。

f:id:wp_miyazawa:20170706115807p:plain

チェックを入れると機能がアクティブになり編集できるようになるので、

Birthの右横にある+をポチッと押します。

f:id:wp_miyazawa:20170706115954p:plain

するとSubEmitterBirthという新しいParticleSystemが生成されます。

Sub Emitterは親のParticleをEmitterとして発生するため、

親が動くと発生位置がずれていく、といった感じで

親の通ったところに残って尾を引いているようになります。 

f:id:wp_miyazawa:20170706143109g:plain

ひとまずこの状態で次にすすみます。

 

3.メインの部分を作る。

打ちあがりましたので、次は爆発させます。

前項ではSub EmitterのBirthを使用しましたが、

次はDeathを使用します。

先ほど同様、今度はSub Emitters内のDeathの右横にある+をポチッと押します。

するとSubEmitterDeathという新しいParticleSystemが生成されます。

この段階でSub Emittersの中は下図のようになると思います。

f:id:wp_miyazawa:20170706123025p:plain

 

Deathは親が消滅したタイミングで発生させる機能で、

デフォルトだと親のParticleから球状に新しいParticleが発生します。

f:id:wp_miyazawa:20170706151801g:plain

 

まとめ

以下三段階でSubEmitterを利用した花火ができあがります。

①Particle Systemを作成

②SubEmittersにチェックを入れる

③2つ"+"をポチッ

 

補足

 このままでは花火風のもので終わってしまうため、

次の手順を行うとより花火に近づけると思います。

・花火の元(Particle System)

 -Start Lifetime(寿命)、Start Speed(打ち上がる速さ)の調整

 -EmissionのRateで出る数を調整

 -Color Over Lifetimeでフェードインアウト、色味を調整

・打ちあがっている時の尾(SubEmitterBirth)

 -Color Over Lifetimeでフェードインアウト、色味を調整

 -Size Over Lifetimeで大きさの調整

・最後の爆発(SubEmitterDeath) 

 -Gravity Modifierで重力をつける

 -Color Over Lifetimeでフェードインアウト、色味を調整

 -Size Over Lifetimeで大きさの調整

f:id:wp_miyazawa:20170706142505g:plain

 

shurikenでは多彩な表現が可能です。

たくさんのパラメータが自由に設定できるので、

追々紹介できたらと思います。

クラフィのイラストレギュレーション

クラッシュフィーバー
アートディレクターの磯部です。開発段階のときから
クラッシュフィーバーのデザイン周りに携わっております。

f:id:wp_isobe:20170704185236p:plain

クラッシュフィーバーには1000体以上のキャラクターが登場します。
種族も格好も違う、個性豊かな仲間たちですが、どこかクラフィらしい
ポップさを感じるデザインになっているのではないでしょうか。

キャラクターは多くのイラストレーター様によって描かれていますが、
描いて頂くときに雰囲気がバラバラにならないようルールを定めて、お願いをしています。
(これをイラストレギュレーションといいます)

今回はこのイラストレギュレーションについて説明していきましょう。
これさえ知ればクラフィっぽい絵がかけるかも…!?




■合言葉は「ハッチャケ ワクワク シャレオツ ポジティブ ポップ」
クラフィキャラクターを描くにあたって意識して欲しい言葉、それが
「ハッチャケ ワクワク シャレオツ ポジティブ ポップ」です。
クラッシュフィーバーのデザインは見ているだけでハッチャケていて
ワクワクして、それでいてシャレオツでポジティブでポップな必要があります。
なんのこっちゃという思うかもしれないですが、要するに見ているだけで
楽しくなれるようなデザインを目指しているっていうことですね笑
デザイナーチームはこの合言葉を常に頭に入れて作業をしております!

■デザインは現代感そして仮想空間感
クラッシュフィーバーには様々な服装をしたキャラクターがいますが、
舞台はファンタジーでも、遠い未来のSFでもありません。
明日には実現するかもしれない、現代に限りなく近い未来。
なので新しさを感じつつも、現代にもある服の要素を随所にとりいれています。
逆に着物やチャイナドレス等古くからの伝統を受け継ぐ服には
プラスで現代アレンジをしている場合もあります。

f:id:wp_isobe:20170704185254p:plain

▲和服に現代アレンジをした服の例。

■キャラクターには躍動感を!

キャラクターは今にも動き出しそうな躍動感を感じるポーズを
指定しています。地面を感じさせない、
宙に浮いたポーズもこのレギュレーションから生まれています。
イラストからキャラクターの動きが伝わってきませんか?
f:id:wp_isobe:20170704185251p:plain
▲躍動感を感じさせるポーズに!


■配色はカラフルに!
クラフィのキャラには、赤、緑、青、黄と色が決まっていますが
いかにも赤属性です!というカラーにしてしまうと、
まとまりすぎて、ワクワクした印象でなくなってしまうので、
あまり一つの属性色にとらわれすぎないような配色を指定しています。
言われてみればまぁ赤属性かなくらいの配色バランスになっていたりします。

■キャラクターの線色は赤茶色。
黒だとクラッシュフィーバーのポップな世界には少々きつく
赤茶だとしっくり馴染みますね。
f:id:wp_isobe:20170704185934p:plain

▲拡大してみると赤茶色なんですよ。

■影は二段階 ハイライトは一段階
基本はアニメ塗りとよばれる、色がはっきりわかれた手法で塗られています。
もし1キャラだけ厚塗りだったり、劇画調だったりしたら
浮いてしまいますよね。

■まわりにふんわり光彩を
クラフィは仮想世界ALICEを舞台にしております。
ALICE内のユニットは自由に宙に浮くことができるため、
浮遊感を2Dイラストでだすために、ふんわり浮いているイメージを
キャラクター周りの光彩で表現しております。

■最後にALICEで生まれた証を刻む
キャラクターにはALICEマークというALICEで生まれた証が
ついています。四角いマークの下にユニットIDが刻まれているのがわかりますでしょうか。

例外として、ウイルスキャラクターはバグなどの予想外な電子のひずみから
生まれていたり、どこからかネットを通じて
やってきたキャラクターになるのでALICEマークがついていません。

女王に生み出されたキャラやゴーストのキャラは別のマークがついているので
探してみてはいかがでしょう。

f:id:wp_isobe:20170704185247p:plain
▲ALICEマーク。四角の下にはIDが刻まれています。



このようなレギュレーションを経て
イラストレーター様に素敵にかいていただいた、キャラクター達。
今日もALICEでいきいきと暮らしていますので
是非会いに行ってあげてくださいね!

 

Unity + Daydream開発はじめの一歩(2017.6月最新版)

今回はUnity + Daydreamを使用したVRアプリ開発の第一歩を書きたいと思います。

開発環境

Unity5.6.1f1(Unity5.5.xはDropdownの表示に問題があるため使用不可)

今回の記事を実践するに当たっての前提

  • Unityはインストール済みであること
  • Android SDKはインストール済みであること(APIレベル24以上)
  • UnityのAndroid SDKの設定は完了済みであること

対象者

  • Unityの操作はある程度出来るレベル

スクリーンショットはMacですが、Windowsでも基本的には変わらないはずです。

今回は新規プロジェクトを作成し、イチから作っていきます。 f:id:m_iwahara:20170627124217p:plain

1. Google VR SDKのダウンロード

Google VR SDKのダウンロードを行います。

Downloads and Samples | Google VR | Google Developersページ内の 「Download SDK」をクリックすると、SDKをダウンロードできます。 執筆時点(2017/06/27)でのバージョンは1.60になるかと思います。

f:id:m_iwahara:20170627125724p:plain

2. プロジェクト設定の変更

Unityプロジェクトのビルド設定をAndroid向けに設定します。 このあたりは通常のUnityと変わりません。 手順は以下のとおりです。

  1. [File] -> [Build Settings]を開く。
  2. [Platform]で[Android]を選び、[Switch Platform]をクリックする。

3. Google VR SDKのインポート

Google VR SDKのインポートを行います。 SDKはunitypackage形式で提供されているので、開けばインポートされます。 手順は以下のとおりです。

  1. ダウンロードした「GoogleVRForUnity.unitypackage」を開く
  2. [Demos]のチェックを外す(Demoシーンを利用したい場合はチェックを入れたままにする)
  3. [Import]をクリックする f:id:m_iwahara:20170627141053p:plain

4. Daydream対応にする

Daydream対応のアプリにするため、設定を変更します。 DaydreamはAndroid7.0以上である必要があるため、合わせてAPIレベルも変更します。 手順は以下のとおりです。

  1. [Edit] -> [Project Settings] -> [Player]を開く
  2. [Virtual Reality Supported]にチェックを入れる f:id:m_iwahara:20170627141313p:plain
  3. [Virtual Reality SDKs]のリストでDaydreamを選択する f:id:m_iwahara:20170627141338p:plain
  4. [Minimum API Level]を[Android 7.0]に設定する f:id:m_iwahara:20170627141413p:plain

5. Daydream用オブジェクトの配置

DaydreamアプリをUnityエディタで実行するのに必要なPrefabをゲームに配置します。 これで、実機を通さなくてもある程度の検証が可能になります。 手順は以下のとおりです。

  1. [project]ウィンドウ内の[Assets] -> [GoogleVR] -> [Prefabs] -> [GvrEditorEmulator]をHierarchyのルートに配置する。 f:id:m_iwahara:20170627143012p:plain

6. 確認用オブジェクトの配置とカメラ位置の調整

実際に動いているかチェックするために、Cubeを少し前に置いておきます。 また、カメラ位置はあとで操作しやすいように[0,0,0]に直しておきます。 手順は以下のとおりです。

  1. cubeを[0,0,5]の位置に配置する f:id:m_iwahara:20170627144721p:plain
  2. Main Cameraの位置を[0,0,0]に調整する f:id:m_iwahara:20170627144739p:plain

7. エディタ実行

エディタ実行するとCubeが映し出されるはずです。 この状態でALTキーやControlキーを押しながらマウスカーソルを動かすと、カメラも合わせて動きます。

ALTキーを押しながらマウスカーソルを動かすと、Y軸を中心としてカメラが回転します。 f:id:m_iwahara:20170627150736g:plain

Controlキーを押しながらマウスカーソルを動かすと、Z軸を中心としてカメラが回転します。 f:id:m_iwahara:20170627151205g:plain

8. 実機実行

ビルドして実機で実行したい場合は、以下の手順を実行します。

  1. シーンを保存します。
  2. [File] -> [Build Settings]を開く
  3. [PackageName]をデフォルト(com.Company.ProductName)から変更する f:id:m_iwahara:20170627152458p:plain

なお、初めて実機で実行する場合は、端末側で初期設定が必要です。 基本的に画面の指示に従えば良いのですが、PlayストアのPINコードが必要になりますので、用意しておくと安心です。

以上、はじめの一歩でした。

長くなってしまったので、Daydreamのコントローラに関しては別の記事に書こうかと思います。

海外展開するにあたって

エンジニアの田島です。

クラッシュフィーバーの海外展開を担当していて、国内版とは違う点を書きたいと思います。

マルチ応募で使うSNSについて

 国内版と繁体字版ではマルチの応募をLINEで行うのですが、グローバル版と韓国版ではLINEから変更しています。

 グローバル版はリリース当初は15言語対応でリリースする事が決まっており、
 国ごとに最適なSNSで募集ができるよう、様々なSNSをサポートするShareSDKに変更しました。

 韓国版については韓国ではKakaoTalkが最も普及しているのでKakaoTalkに変更しました。

タイムゾーンと回線速度

 また、グローバル版は15言語対応ということで、タイムゾーンはUTCで設定しています。
 時差の計算をしてデータ設定するのが大変そうでした。

 その他にも各国で回線スピードが一定ではないので、国内版では実装していない機能の
 分割ダウンロードを追加で実装する必要がありました。

サーバーAPIのリポジトリ管理について

 国内版と繁体字版だけの時はサーバーのAPIコードも別々のブランチで管理されていました。

 国内版で開発した機能を繁体字版にマージして繁体字版を最新に更新するという手間のかかる作業を行なっていましたが、
 コンフリクトが発生した場合にマージ作業が大変になる事が多くありました。

 この辺はグローバル版をリリースする時に統一ブランチを作成してマージ工数の削減は行なっています。

AWSについて

 AWSについてもリージョンによっては使えないサービスがあるので注意が必要です。

 現在は1つのリージョンで運用しているので問題はないのですが、
 国ごとにリージョンを分ける事になった場合は代替サービスを検討したり、
 使えるサービスで置き換えられるかの検証も必要になってきます。

 APIへのアクセスについては、Amazon CloudFrontをキャッシュ無しでアクセスする形式を取っております。
 こうすることで、世界中からのアクセスに対して低レイテンシーを実現しております。

まとめ

 まだまだ、海外展開をする事でやらなければいけない事や注意する点は多いです。

ベクションによる酔いを体感するアプリを実際に作って体感してみた

今回はVRでネックとなる「ベクションとVR酔い」について、実際にアプリを作成して体験してみました。


そもそもベクションとは?

視覚誘導性自己運動感覚(しかくゆうどうせいじこうんどうかんかく、ベクション(英: vection)とも)とは、実際には静止している人間が、視覚情報によって移動しているような感覚が引き起こされてしまう現象である。

視覚誘導性自己運動感覚 - Wikipediaより引用。

VRには欠かせない要素であり、ベクションによって仮想空間内を移動しているように感じることが出来ます。 しかし、実際に身体は移動をしていないため、三半規管との認識に齟齬が発生し、VR酔いに繋がってしまう要素でもあります。 なので、VRでは勝手にカメラを動かすことはご法度とされているわけです。


作ってみた

ということで、実際にVR空間を移動するアプリを作成し、VR酔いを体験してみました。 実行環境はHTCのVIVEを使用し、Unityで開発しました。 仕様は以下のとおりです。

以下、それぞれ体験してみた感想です。


一人称視点(等速移動)

f:id:m_iwahara:20170626112809g:plain

個人的な感想
  • 移動開始時が一番酔う
  • Z軸の移動より、X軸の移動のほうが酔う

一人称視点(加速移動)

f:id:m_iwahara:20170626113237g:plain

個人的な感想
  • 思ったよりは酔わなかった
  • 視界制限を入れてみたが、あんまり効果は感じられず
  • 視界制限を広くするタイミングが早すぎたかも

三人称視点

f:id:m_iwahara:20170626113505g:plain

個人的な感想
  • カメラをY軸を中心にグリグリ回転させればもちろん酔う
  • それ以外は、思ったより酔わなかった

おまけ(実際に走る動作)

コントローラを激しく上下することで、走っている動作を模し、認識の齟齬を減らす試みです。

f:id:m_iwahara:20170626113907g:plain

個人的な感想
  • 走るためにコントローラを動かすので、正直酔ってる場合ではない!
  • 酔うのは移動にしか集中していないから?
  • 移動以外に注意を向けられればVR酔い対策になるかも

結論

酔うものは酔う。慣れるしか無い!

…というのも身も蓋もありませんので、GoogleのDaydream Labsが紹介しているVRにおける移動システムの知見を紹介します。 Daydream Labs: Locomotion in VR


等速移動

緩やかな加減速はせず、移動は一定速で固定する移動方法です。 ローラーコースターのように加減速を繰り返していても、実際には移動していないのでVR酔いにつながるようです。


トンネリング

VR酔い体験アプリでも実装した、移動中は視界制限をして移動する方法です。 視野の大部分を静止した空間が占めることによって、VR酔いを起きづらくするようです。


テレポーテーション

f:id:m_iwahara:20170626114321g:plain

画像はDaydream Labs: Locomotion in VRより引用

加速も減速も無いので、非常に酔いづらい移動システムです。 ただし、プレイヤーの空間把握に混乱が生じるので、何かしらの方法で移動したことを伝える必要があります。 また、ゲーム内に組み込むべき理由付けが出来ないと、没入感を損ねたりします。


立つか、回転する椅子に座る

ハードウェアの制限などにより、360°回転させることは出来ないため、 立つか回転する椅子に座ってプレイすることを想定して設計することは非常に魅力的です。 プレイヤーがVR空間でどこに行きたいのかを確認させるために、VR空間内で自身を回転できるようにすると良いそうです。


最後に

VRの制限をゲームデザインに取り入れるという考え方もありますが、 どちらにせよ、ゲームに合わないのであれば、ユーザーは離れていってしまうので難しいところです。


ライセンス表記

f:id:m_iwahara:20170626122231p:plain

キャラクターに込められたコンセプトやテーマについて

こんにちわ!

デザイナーの渡辺です。 

 

主にキャラクター指示書やゲーム内背景の指示書の作成及び

赤入れの制作などを行っております。

 

今回は指示書作成において超重要な部分である

「コンセプト」「テーマ」について、

実際にどのような内容で指示書を作成したかを

具体例やちょっとした裏話も兼ねてお話ししたいと思います!

 

キャラクターの指示書が出来上がる過程につきましては、

同じくデザイナー伊藤さんの記事

クラッシュフィーバーのキャラクター指示書ができるまでをぜひご覧ください!

 

コンセプトとテーマとは

伊藤さんの記事で触れていた「ユーザー様に届けたい価値・個性」にあたる部分です。

 

少し前までの指示書では、指示書の説明文にキャラの個性や価値を文言で

説明していましたが、よりクリエイター様に完成系のイメージが伝わるように

コンセプトに加えてキャラクターごとに「テーマとなる文言」をそれぞれ用意し

指示書に記載するようになりました。

 

今回は実際に私が指示書を担当した中から

「ギルガメッシュ」「ガンバンテイン」「ストレングス」

3キャラのテーマやコンセプトなどご紹介致します!

 

 

・・・「ギルガメッシュ」の場合

■R6ギルガメッシュ

f:id:wp-watanabe:20170609155634p:plain

テーマ「チェスの兵士・残虐・少年」

 

史実では神格化されたりした人物ですが、

同時にとてもわがままな暴君であったという話から

「頭が切れるが、ワガママで、子供の残虐性を持った少年」キャラクターとしました。

 

自らは武器を振るわず、チェスで戦術を練りつつ徹底して部下に攻撃を行わせる姿で

余裕のある感じを狙っています。

 

実は頭に浮かんでいる王冠は、ALICE内で相当な金額のかかるアイテムのイメージで付けてもらいました。

ギルガメッシュががんばって手に入れて、自分が偉い王様だと見せびらかすために

いつも装備しているような・・頭は切れるけど、ちょっと年相応なかわいい子供っぽい部分も覗かせているイメージです。

 

 

 

・・・「ガンバンテイン」の場合

■R5のガンバンテイン

f:id:wp-watanabe:20170609155615p:plain

テーマ「癒し・魔法少女・たまご」

 

癒し担当の女の子で、

ライトノベルに出ていそうな妹系のロリロリな魔法少女がコンセプトです。

 

ガンバンテインは、あらゆる魔法を無効化する杖という元ネタから

補助を得意とする回復系のキャラクターとし、

また、補助・防御に優れている・無効化するというイメージから

杖には綺麗なたまご(母性や保護の象徴)のモチーフを使用していただきました。

たまごは、「魔法少女のたまご」という意味合いも兼ねています。

 

R6の姿に覚醒した際、アニメの魔法少女のようにガラッと姿が変わっているのは

実はこのテーマに沿っていたからなんですね。

 

■R6でのガンバンテイン

f:id:wp-watanabe:20170609155838p:plain

ユーザー様の中でもこの「魔法少女」のテーマに気づいている方がおり、

気持ちが伝わったようでうれしくなりました。

 

 

 

・・・「ストレングス」の場合

■R6ストレングス

f:id:wp-watanabe:20170609160307p:plain

 テーマ「ゴシックビーストテイマー・ライオン・不気味な少女」

 

ストレングスはタロットカードの「剛力」が元ネタです。

タロットカードでは白いワンピースを着た女性がライオンの口を押さえて

服従させているという、どこか神秘的で謎めいた内容だったので、クラフィでは

「何を考えているのかよくわからない、ちょっと不気味な女の子ビーストテイマー」

というコンセプトで行くことにしました。

ビーストテイマーというと、大抵毛皮の獣っぽい衣装やサーカス等を思わせる

服装を思い浮かべると思いますが、クラフィではあえて世界観にあった

現代的でゴシック風のセクシーなデザインとすることで個性的な女の子になるよう

狙ってみました。

 

他にもリボン風のゴシックなアイパッチや、女の子自身にもライオンっぽい部分を

入れてもらうなど、個人的なフェチズムが全開の内容となっています・・・(笑)

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

 

今回は「ギルガメッシュ」「ガンバンテイン」「ストレングス」をご紹介させていただきましたが、いかがでしたでしょうか?

 

クラッシュフィーバーでは、キャラクターのデザインに

「クラッシュフィーバーらしさ」を求められており、

できるだけありきたりだったり、見ていて退屈にならないように

デザイナー班やスタッフ一同で奮闘しております。

 

今後新しいキャラクターが出てきた時に、

何のテーマで作ったのか考えてみると面白いかもしれませんね。

 

それではお読みいただき、ありがとうございました!