「東北ずん子」カテゴリーアーカイブ

ずんだ餅を転がすアプリをゲーム化し始めた (その3)

だいたい実現したいことは実装したので、細かなネタも含めて解説していきます。  前回からいろいろ実装したあたりを書くべきな気がしましたが、だいぶん忘れたので総集編っぽくゲームを起動してからのネタを記述していきます。

以下、基本的にネタバレしかないので、未プレイの人は、とりあえず遊んでください。
http://hyakuren-soft.sakura.ne.jp/ZundaClicker/

タイトル画面

では、タイトル画面から解説していきます。
最初はこんな感じに、どこにでもありそうな無難なタイトル画面だったのですが、

ZundaClicker_title

「ずんだ餅が降ってくる理由とか意味がわからない。 なんで?」 というコメントをもらったので、プロローグが表示されるようにしました。

ZundaClicker_prologue

プロローグの文章は、時間でスクロールするようになってて、ずんだ餅をなぜ穴に落としているのか、東北ずん子たちは何をしているのか、の説明が表示されます。 30 分くらいで考えた文章としてはいい感じの説明になっていると思います。 なので、遊んで確認して見て下さい
(タイトル文字列の「Zunda Clicker」が背景と重なって読みづらくなったのは気にしないことにしました。  「Zunda Mochi Clicker」じゃないの? ってあたりもです)

ゲーム中の演出

ずんだ餅を食べるずん子

では、東北ずん子のスキルを説明していきます。 このゲーム中では3姉妹とも詰まったずんだ餅を穴に落とすためのスキルを持っているわけですが、ずん子のみ姉妹と違うスキル、そう、ずんだ餅を食べることができる、というスキルを持っています。  その理由は、ずんだ餅を食べる画像素材があったのはずん子のみ、だからです。(見も蓋もないな…)

zzm_taberu01

このスキルがあるがために、ずん子は他の2人よりもスキルが発動しにくくなっています。 それはずん子に実装した処理ルーチンが

ずんだ餅が地面にあれば、そこに移動して食べ始める

ずんだ餅が詰まっていればスキルを発動する

適当に移動したりする

という優先順位になっているからです。
しかも、地面にあるずんだ餅を食べ終わるとずん子は寝ます。 寝てる最中はスキルが発動しないので、なおさらスキルが発動しにくいのです。 スキル、2つもあるのに…。

zzm_utubuse_a

まぁ、気にせずその2つのスキル「ずんだアロー」と「もちもちジャンプ」について説明しましょう。

「ずんだアロー」

文字通り、普通のもちを ずんだ餅に変えてしまう技なわけですが、降ってきてるのは最初から全部ずんだ餅なんですよね。 じゃぁ、このスキルをどう表現すればいいか、そう、簡単です。 普通の餅がなければ召喚すればいいじゃない、ってやつです。

ZundaClicker_shoot

実装としては「ずんだゲート」から餅が出現するようにして、矢が餅に衝突したときに、その餅を消して、新たにずんだ餅を生成するようにしています。 ときどき、生成されたずんだ餅の速度が早すぎて壁を突き抜けることがありますが、物質が変換されてずんだになるレベルのエネルギー量を考えると、それは当然のことだと自分に言い聞かせながら作ってました。 みなさんも、そう理解してくれると助かります。

「もちもちジャンプ」

このずん子が壁の中に入って餅を落とすスキル、これは実は「ずんだアロー」より先に思いつきました。 ずん子にスキルが2つあるのは「もちもちジャンプを実装したけど、ずんだアローを実装しないわけにはいかないよなー」って悩んだ結果です。

ZundaClicker_jump_drop

で、ずん子の足先にずんだ餅や壁との当たり判定のための透明な円があるわけですが、ここだけずんだ餅がない空間ができてます。 上の画像では足先に透明な領域がありますが、「見えるべきは足先ではなくて太ももではないか!」って気づいたので、透明な領域が太ももになるように最新版では調整しなおしました。 自分で気づけてよかったと思っています。

ZundaClipper_mochimochi
修正後

あとは、ずん子がジャンプしたときに茶色の壁を飛び越えて左右端から地面に落ちてしまうことがあったので、ずん子専用の見えない壁「ウォール・ずん子」が配置されています。 この壁のおかげで、ずん子の進撃は防がれているのです。

それから、みなさんお気づきだと思いますが、ずんだ餅に埋もれたずん子がときどきジャンプするのは呼吸をするためです。

ZundaClicker_fall_1 ZundaClicker_fall_2

最後に「もちもちジャンプ」で穴に落ちたずん子がアプリ外に落ちてくるやつ、作る前は「このネタ最高じゃね?!」って思ってたんですけど、作ってみたら案外普通でした。 面白さを作る前に評価するのは難しいですね。

きりたんの「きりたん砲」

パワーアップ前後で威力が全然ちがう「きりたん砲」ですが、最新版では爆発と同時に画面外に飛び散ったずんだ餅をデスクトップに描画するようにしました。

ZundaClicker_bomb_1 ZundaClicker_bomb_2

ずんだクリッカーを起動したまま開発してて、ときどきずんだ餅がデスクトップに飛び散るのを見て「あぁ、動作させてるんだっけ?」って思ったりしました。 現状ではアプリ外に出たずんだ餅ごとにプロセスを起動してるのですが、複数個のずんだ餅を描画する 1つのプロセスを起動する方が負荷が少なかったなー、と反省しています。

それから「きりたん砲」のカットインが「焼き払え!」って感じのポージングなのは大変お気に入りです。

ZundaClicker_cutin_kiritan

イタコの「ずんだ口寄せ」

なんというか「ずんだ口寄せ」っていうスキルの名称だけは決まったけど、どういう演出にすればいいかが全然決まらなかったです。  そのせいか、無難な作りになってしまってちょっと反省です。 ごめんね! でも ZPS (Zunda Per Second) は大きいスキルだから許してね!

ZundaClicker_itako_kuchiyose

クリア後のずんだ餅の登録

ZundaClicker_donate

登録のボタンを押すと、本当に貯めている数だけのずんだ餅が落ちてくるようにしました。  なので、登録するずんだ餅の個数が多い場合は延々とずんだ餅が落ちてきます。 それを見てると変な笑いがこみ上げてくるから不思議です。

それから、左下のずん子は固定せずに山盛りずんだ餅の中腹に配置して、落ちてくるずんだ餅に流されるように変更しました。 いい感じです。

ZundaClicker_mount_ticket

後から見なおしても、この処理を実装するときに作ったチケット(ソフトウェア作成タスクを管理するもの)は、意味不明な方に属すると思います。  (アプリ自体はネタを追い求めてますけど、ソフトウェアの開発自体は真面目にやらないと動作しないのでちゃんと管理してるのです)

さいごに

作ってて楽しかった。
ありがとう。

やる気になったら登録されたずんだ餅の個数をグラフ化するあたりを作ります。

ずんだ餅を転がすアプリをゲーム化し始めた (その2)

前回までで、

ZundaRolling_sisters

こんな感じだったアプリをゲーム化するべく実装を行っていった。 今回も淡々と何をやったか紹介します。 興味があればソースコードを見てもらえればと思います。

で、基本的にネタバレの嵐なので、まだ「ずんだ餅クリッカー」で遊んでない方はご注意ください!

スキル「きりたん砲」の実装

ずんだ餅が詰まったときに、きりたんが「きりたん砲」を撃って詰まりを解消したら面白いんじゃね? と思ったのがきっかけです。  「面白いかも! って思ったら作ってみる」が、今回の合言葉です。

ZundaRolling_kiritan_hou
まずは、きりたんが穴の下に移動し、きりたん砲を撃つポーズを取るようにしました。

ZundaRolling_fire_1
次に、 Detonator Explosion Framework を適用しました。

ZundaRolling_fire_2
なかなかいい感じだと思います。 実際には爆風エフェクトが Sprite2D より手前に表示されたり奥に表示されたりして、それの修正に時間がかかっています。 結局 Detonator 側の C# スクリプト内に Renderer の layerSortingName を設定するコードを追記して解決しました。

ZundaClicker_explode
このスクリーンショットなどは、姉たちが寝ているなかで「きりたん砲」をぶっぱなす感じが気に入っています。

ZundaClicker_cotinuous

つぎに、爆風だけだと微妙なので、Rigidbody2D を適用した透明なアセットを用意して爆風と同時に穴の下から上に移動する速度を設定して配置しました。 これで、爆風と同時にずんだ餅が微妙に飛び散って詰まりが解消されました。

で、連続で「きりたん砲」を撃ち続けると、餅が飛び散って積み上がってしまい、ずんだ餅が落ち続けてしまうのが確認できました。 これに対処するために、地面に落ちたずんだ餅はずん子に食べさせることにする決心をしました。 よろしくね、ずん子ちゃん。

ZundaClicker_cutin_kiritan

次に、カットインを作成しました。 「きりたん砲」を使う前に表示することにしました。 このカットインの背景素材も「ぴぽや」のものを利用しています。 いい感じです。

あ、このあたりのキャラクターが移動したり砲撃するあたりの処理はコルーチンで実現しています。 わぁい、コルーチン。 私、コルーチン大好き!

ZundaClicker_cutin_zunda_arrow
次に、ずんだアローのカットインだけ先に作ってみました。

ZundaClicker_giridan_hou
で、カットインの表示が重なると「ぎりだん砲ー」になるのが確認できました。 スキル発動は同時に起きないようにする必要があるのがわかりました。

ZundaClicker_zundamochi_oishiiyo
あとは、ノリと勢いだけでずんだ餅のカットインも作りました。 いい感じです。

ZundaClicker_dropped_eating
地面に落ちたずんだ餅を食べるあたりを、いろいろどうにかして実装したときのスクリーンショットです。(たしか

zunda_loop
それから、そろそろ紹介ページでも作るか、って思ってて作った悪循環コラがこれです。 インパクトが不足しているのでボツにしました。

ZundaClicker_jump_drop
スキル「もちもちジャンプ」を実装したり。

ZundaClicker_title
タイトル画面を作ってみたり。

ZundaClicker_itako_kuchiyose
スキル「ずんだ口寄せ」を実装したり。

ZundaClicker_english_logo
タイトル画面にロゴを適用したり。

ZundaClicker_shootZundaClicker_hitどういう実装にするか決まらなかった「ずんだアロー」を実装したり。

ZundaClicker_skill_cooldown
スキル発動までのクールダウン時間を表示するためのアイコンを右側に配置したり。

とかをしました。
まだまだ完成じゃないので、引き続き実装してます。

つづく!

このアプリのソースコードは、下記プロジェクトで管理されています。
https://bitbucket.org/satofumi/zunda_clicker

 

ずんだ餅を転がすアプリをゲーム化し始めた

以前に作ったずんだ餅を落とす脱穀機シミュレータを、ちゃんと Google Play とかでリリースすべく作り込みを始めた。 淡々と変更する様子のスクリーンショットを貼り付けながら、何を変更したのか簡単に書き出していく。

ZundaRolling_zps
ずんだ餅が落ちる速度 zps (Zunda Per Second) を表示するようにした。

ZundRolling_dropped_per_click
クリックしてない間に落ちるずんだ餅の数を表示するようにした。(右下)

ZundaRolling_background
背景画像を適用した。 草原だとずんだ餅の色と同じなので雪原にした。
(素材は東北ずん子のもの以外は「ぴぽや」の物を使ってる。

ZundaRolling_hole

ずんだ餅が画面下まで落ちていくのは違和感があったので、穴を描画してそこにずんだ餅が落ちるかのような表現にした。
穴の画像と、穴の下部分の画像を用意して実現した。

hole
穴の画像。これを左右に伸ばして使ってます。

hole_front
↑ここに穴の下の部分が白色で、それ以外が透明な画像があります。(見えませんが

ZundaRolling_zunko_import
次に、キャラクターを配置しようとして東北ずん子ちゃんの画像を取り込んだ。
取り込んだら、ちょうど足が穴にはまっていて吹いた。

ZundaRolling_sisters
他の姉妹も配置した。
あと、ここまでで Anrdoid の加速度情報でもタップしたのと同じ操作になるようにしたり、ハイスコア相当の値がゲームの起動をまたいでも保持されるようにした。

今後の予定としては「ずんだ餅を 1,000 個ほど落とそう!」とかの実績を追加したり、キャラクターが動作するあたりを実装しようと思う。

タイトル画面を用意するかは、悩み中。

このアプリのソースコードは、下記プロジェクトで管理されています。
https://bitbucket.org/satofumi/zunda_clicker

東北ずん子の痛 Suica を作ってみよう (完結編)

前回までのあらすじ

痛 Suica を作ろうとして会社のプリンタを買い直した。

というわけで、プリンターが届いたので作業を再開する。

new_printer_2013_1227

というか届いたプリンターを見て「最近のプリンターは安いのに色々と機能が付いててスゲー」と思ったり「こんなに安くて大丈夫か?」とか思ったりした。

で、セットアップを終えてから前回に作った痛 Suica のシートを印刷してみる。

suica_printed_2013_1227

いい感じです。
ちなみに同時刻の同僚はプリンターで回路パターンを印刷し、さっそく感光基板を作ってました…。うーん、ここでゲーテの表現を借りるなら

「感光基板を作る社員のとなりで 痛 Suica を作る社員がいてもいい。それが自由というものだ」

とか思ったりしました。
まぁ、作業を進めます。あとは、このシート(A-one 品番: 29281) を Suica に貼り付けてラミネートフィルムを貼り付けたらおしまいです。このあたりの手順は下記ページを参考に行いました。

痛Suicaの作り方
http://itaicard.com/%E7%97%9Bsuica%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9/

で、できたものがコレ。(実は微妙に気泡が入ってしまっています)

zunko_suica_2013_1227

前回からの作業も含めると色々と試行錯誤しましたが、それっぽく出来上がりました。今回の作業で得られた教訓としては

  • 簡単だと思っていることでも、実際に試しておいたほうが良い。
  • 新しいことをやると知識が増える。
  • フリー素材は人を動かしうる。

などでしょうか。
この知見は以降の業務でも生かしていきたいと思います。

東北ずん子の痛 Suica を作ってみよう (挫折編)

この記事では「せっかくだから 痛 Suica でも作ってみるか!」と思って作り始めた結果、色々と試行錯誤することになった様子を紹介できれば、と思います。

まず、テーマを探しました。せっかくなので「東北ずん子」で。
探すと、幾つかの候補が見つかります。

画像をダウンロードしたら、まずは印刷したときの大きさが Suica と一致するかを確認するために、印刷してみます。

suica_too_large_2013_1225

はい。大きすぎますね。
確認したところ「画像をフレームに合わせる」にチェックが入っていたのが原因でした。orz
気を取り直して、チェックを外して印刷してみます。

suica_too_small_2013_1225

うん。今度は小さすぎるかな!
何か原因があるように思うのですが、よくわかっていません。なので画像を拡大して対応しました。あと、Suica の絵を印刷する A4 のシートに1枚しか印刷しないのはもったいないので、いくつかの画像を配置して印刷してみます。

suica_gray_all_2013_1225

なんか、いい感じ。
(画像を複数ならべるのは Excel に画像を貼り付けることで実現しています)

ただ、プリントした画像を定規で測った結果、実物よりも少し小さかったので、印刷する画像を拡大して対処したりしました。プリンタの設定を変更してサイズ調整するのが良いのだと思いますが、 あきらめました。(設定方法がわからなかった!)

で、実際に Suica に貼るためのシートに印刷するために、カラーで印刷してみたところ、こんな感じに。

suica_color_2013_1225

ぱっと見よさそう。
と思ったものの、よく見ると…

suica_color_clip_12013_1225

単色のはずの緑の面が、かすれてる…。

この問題はプリンタ側の問題のようです。プリンタのヘッドクリーニングをしても改善されないので、同僚と相談した結果プリンタを新規に購入する方針になりました。印刷したパターンを感光させて回路基板を作るときにも困るしな。以下、プリンタを注文する前の社長から許可をもらったときの会話。(社員は全員で 10 人くらい、だっけ?)

私「あ、(社長) さん。プリンターなんですけどー、インクの出が悪くてエッチングで回路基板をつくるときとかに不都合があるんで、新しいの買ってもいいですか?」
社長「おう、いいよ。必要なら遠慮なく買って」

というわけで、社長に了承を取ったので遠慮なく注文した。
プリンターが届いたら作成の続きをしようと思う。

簡単だと思っていたことでも、実際にやってみると色々ある。ということが理解できただけでも有意義だった。