DMC ステータス画面風ホーム画面を作ってみました。

Devil May Cry

DMC1のステータス画面ってちょっと配置を工夫すればディティールを崩さずスマホのホーム画面にできるんじゃない?とふと思い立って、実際に作ってみちゃいました。

目標は、デビルメイクライの雰囲気を壊さないようステータス画面を再現しつつ、それでいて出来る限り使い勝手を破綻させないこと! …結果としては、好きにウィジェット等が置けない分やや利便性や拡張性に欠けるかもしれませんが、一応実用できる範囲内で出来たのではないかと思います。実用しないけど;

Devil May Cry Status HomeScreen

動画ではカクカクして見えますが、実際はもっと滑らかに動きます。

機種 Xperia acro HD SO-03D
Androidバージョン 4.0.4
ホームアプリ Lightning Launcher
使用したアプリ ・LL – Multiple Wallpaper Plugin(マルチ壁紙)
・LLW Super Screen Switcher(スクリーン遷移)
・Glaeja(ウィジェット作成)
・SwitchPro Widget(各種設定トグルウィジェット)
 

DMC ステータス画面風ホーム画面:ロックスクリーン DMC ステータス画面風ホーム画面:メインスクリーン DMC ステータス画面風ホーム画面:サブスクリーン

DMC ステータス画面風ホーム画面:オプション DMC ステータス画面風ホーム画面:アプリドロワー

【基本構成】

基本的なスクリーンは、Action画面がデフォルトのホームで、さらにサブ画面としてWeapon、そしてオプション画面の三画面構成です。 Action画面とWeapon画面は、左右のフリックで切り替えられるほか、上部メニューでも切り替える事ができます。オプション画面は”Action”から右フリックか”Weapon”で左フリック。

また、基本の三画面に加えて、アプリドロワー(アプリの一覧画面)とロックスクリーンも独自の壁紙を採用しています。アプリドロワーは上部メニューの”Item”から開きます。 ロックスクリーンはDMCのタイトル画面を、Action画面は実際のステータス画面の”Guns”画面を、Weapon画面は”Devil Arms”画面を、オプション画面はアラストル装備時のオプション画面をそれぞれ模しています。

 

DMC ステータス画面風ホーム画面:フォルダ展開 DMC ステータス画面風ホーム画面:音楽ウィジェット DMC ステータス画面風ホーム画面:天気予報ウィジェット

【アプリやウィジェットの起動】

アプリやウィジェットは、Lightning Launcher標準のフォルダ機能を使っています(メニューによっては、フォルダを介さず直接起動するアプリもあり。カメラ・ギャラリー・電話など)。 フォルダの中には好きなアプリやウィジェットを入れる事ができますが、一応上の画像で使っているウィジェットを紹介すると、音楽プレーヤーはPoweramp、天気予報はEye In Skyというアプリです。

また、上部メニューの”Map”をタップすると地図アプリ(Googleマップ)が、”File”をクリックするとファイラー(Solid Explorer)が開くようにしてあります。

 

DMC ステータス画面風ホーム画面:メインスクリーン背景その2 DMC ステータス画面風ホーム画面:メインスクリーン背景その3 DMC ステータス画面風ホーム画面:各種ゲージウィジェット

【オリジナルウィジェット】

メインスクリーンの背景のダンテは、右上の”File”の下あたりにあるⅠⅡⅢボタンで切り替えることができます。 実はこの待ち受け画面は、本体に設定した壁紙ではなく、ディスプレイとピッタリ同じサイズに調整した特大ウィジェットです。 これはGlaejaというウィジェット作成アプリを使用して作成しています。ⅠⅡⅢボタンを押すことでウィジェット変数の数値を切り替え、それを画像のパスに代入して、あたかも壁紙が切り替わっているかのように見せています。

レッドオーブ数・体力ゲージ・DTゲージの部分もGlaejaで作成したウィジェットです。レッドオーブ数は月日時間、体力ゲージは電池残量、DTゲージはメモリ使用率を表しています。 体力ゲージは100%~51%はグリーン、50%~26%はオレンジ、25%以下になると瀕死のレッドに切り替わります(25%以下は枠の色も赤くなります)。こってるでしょ?w

仕組みはそんなに難しくはなくて、体力ゲージは電池残量のパーセンテージをバーのスプライト画像のX座標に(適切な数値に計算・整形しつつ)代入して、数値が減るごとに左にずれていくようにしています。そして、枠の外にはみ出さないようにマスクをかければ、電池が減るごとにバーが短くなっていっているように見えます。バーがグリーンの時でも、その裏でオレンジ・レッドのバーも同時に動いており、ある一定の数値に達した時(この場合50以下)に手前のグリーンバーの透過度を0にし、後ろのオレンジ(とその裏にレッド)が現れるようにしています。このへんは色々やりようがあると思いますが、バーを画像にしなければもっと単純な構造で実現できるはずです。

DTゲージの場合は、ゲージそのものを動かしては文字がずれていってしまうので、上記の方法ではなくマスクに使うレイヤー(画像)自体が左右に動くようにしています。

Glaejaについては、興味のある方は製作者さんのサイトに詳しい説明があるので是非読んでみてください。
BANANAWANI MICOM. CULB: [Android] Glaeja (ver.4.x)
私自身は今回作るにあたって必要な範囲を勉強した程度ですので理解していない部分が多いです。

いかがでしたでしょうか?もうちょっとこだわりたかった部分もないことはないですが、実際のゲーム画面の雰囲気になかなか近いものができたんじゃないかな?と思っています。

今回作ったホームスクリーンは常用はしませんがいつでもリストアできるようにバックアップしておくので、 「ここをこうしたらもっと良いんじゃないか」「こんな機能があったら面白そう」などなどありましたらコメント頂けると嬉しいです。
※ウィジェット下さい、やテーマ・画像を配布してください、はご勘弁願いますm(_ _)m

最後におまけ。今回のDMCステータス画面風ホーム画面を作る前に作ったホーム画面です。

Devil May Cry HomeScreen1 -Dante- Devil May Cry HomeScreen2 -Dante- Devil May Cry HomeScreen3 -Trish-

  

Responses to this entry

Comments (6) :

  1. Johnny says:

    すごくカッコいい!
    iphoneなのでまね出来ません\(^o^)/

  2. javelina_avatar

    Javelina says:

    Johnnyさん

    ありがとうございます!(^▽^)
    iPhoneの動作や専用アプリ羨ましい・・・!と思うことが多々ありますが、Androidは主にカスタマイズ面で色々と無茶できるのがありがたかったりしますね~。

  3. deep says:

    私もデビル4モチーフのホームを製作したいと思い、
    画像素材や参考になりそうなものを探していたらこちらのホームが。
    凄すぎてぐうの音も出ません(笑)。これぞまさにスタイリッシュ。
    自分とはも何もかもレベルが違いすぎて恥ずかしくなってきました…。

  4. javelina_avatar

    Javelina says:

    deepさん

    ありがとうございます!かなり時間をかけて作ったので、スタイリッシュと言って頂けてうれしいです!
    おお、deepさんはDMC4のホーム画面を製作されているのですね。

    ご参考までに…
    このホームを作ったときは、まず先にグラフィックソフト(Illustrator)で設計図(デザイン、レイアウト)を作り込んで、それから各パーツを精製して、実際のホーム上に配置していきました。ホームアプリは、設計図の配置を実現できそうなものを後から選んだ形です。

  5. Chris00 says:

    素晴らしい~
    他のDMCを再現したホーム画面も是非見てみたいです!
    できたら3とか自分でもやってみたいです

  6. javelina_avatar

    Javelina says:

    Chris00さん

    ありがとうございます!気に入って頂けて嬉しいです。
    他のDMCですか~、それらのステータス画面の再現で、という事ですよね?
    以前ちらっと考えた事はあったのですが、それっきりでした。
    実際にホーム画面として作るかどうかは別として(全シリーズとなると結構時間がかかるので)、レイアウトは作ってみたいと思います。
    レイアウトが出来たらまた記事にしたいと思います。ご要望ありがとうございました!

Leave a Comment

*コメント本文以外の項目の入力は任意です。

Submit Comment

Trackback URL :

Let's Play Devil May Cry!

Devil May Cry(PS2) Devil May Cry2(PS2) Devil May Cry3 Special Edition(PS2) Devil May Cry4(PS3) Devil May Cry HD Collection(PS3)
 
DmC Devil May Cry(PS3) Devil May Cry4(for Windows) Devil May Cry4 Refrain