【アプリ開発】二本指で開閉する洗濯バサミを作る 〜発展編〜【Unity】

こんにちは!
文系大学生のハゲ丸です٩(^‿^)۶





以前、「二本指で開閉する洗濯バサミを作る」という記事の中で、スマホ上でピンチイン・アウトで開閉する洗濯バサミを作りました。
(今回の記事は以前の記事の内容を前提とするので、読んでいない方はぜひご覧ください↓)


sympathy.hatenablog.com

sympathy.hatenablog.com



ここでは、以前作った洗濯バサミの動きをよりリアルに近づけたいと思います。

以前の洗濯バサミの動きにはバネの反発がなく、ゆるゆるな感じがありました。


そこで、スクリプトを変更することでバネの反発を擬似的に表現していこうと思います。

具体的にいうと、今までタッチしている2点間の距離に一次関数的に従属させていた洗濯バサミの開閉角度を、二次関数的に従属させるように仕組みを変えます。


つまり、グラフに表すとこうなります。↓

f:id:sympacifica:20170816221450p:plain

以前が左、改良後は右です。


右のグラフを見ると、ピンチインしていく(2点間距離が狭まる)ほど洗濯バサミが開きにくく(開閉角度の増加量が小さく)なっていくのがわかります。


では、これをどうスクリプト上に計算式で表すかを考えます。
この問題は高校数学で解くことができます。


右のグラフは、頂点と通る点が与えられた二次関数グラフなので一意に求めることができます。

頂点が(a, b)、通る点が(c, d)のときの二次関数の式は


Y = (d - b) / (c - a)^2 * (X - a)^2 + b


となります。

この場合のYは開閉角度、Xは2点間距離です。

また、頂点には(230, 25°)、通る点には(920, 0°)という数字を使います。

※ 230と920は私が実験によって求めた、人が自然に指を開閉したときの2点間距離の限界値を表す定数です。
※ 25°は洗濯バサミの開く限界角度、0°は洗濯バサミが閉じた時の角度をそれぞれ意味します。


こちらが実際のスクリプトです。↓

float leftPartAngle = (0 - 25) * (float)Math.Pow (width - 230, 2) / (float)Math.Pow (920 - 230, 2) + 25;

長くて見にくい式になってしまいましたが、上記の公式のY, X, a, b, c, dにそれぞれ変数名や値を代入しただけです。

ただ一箇所、掛け算と割り算の計算の順番を入れ替えています。
これは桁落ちを防ぐためです。float同士の計算なので気をつけなければいけません。





ということで、改良後の洗濯バサミの動きを記述するロジックは以上のような仕組みになっています。
(説明がわかりやすくできず申し訳ありません。。)

実際に、改良前と改良後で動かした感触は変わったのですが、ぶっちゃけこの変化は実際に触ってみなければよくわかりません。

しかし、改良前と改良後の動きを見ることのできる動画があるので、気になる方はぜひ見てみてください。↓


改良前


改良後





以上で、お粗末ながら、動きのリアリティーを改良した洗濯バサミの仕組みの解説を終わります。

最後まで読んでくださり、本当にありがとうございました。

文系大学生がスマホアプリを作って公開するまで ~進捗状況報告①〜

こんにちは!
文系大学生のハゲ丸です(๑╹ω╹๑ )





以前、「二本指で開閉する洗濯バサミを作る」という記事の中で、スマホ上でピンチイン・アウトで開閉する洗濯バサミを作りました。
(読んでいない方は、ぜひご覧ください↓)


sympathy.hatenablog.com

sympathy.hatenablog.com


そして私は今、その作った洗濯バサミを利用したスマホゲームを作り、公開するところまでを記していくという企画をやっています。


いつになるかは決めていませんが、最後の「公開編」では作り上げたアプリを
実際にアプリストアで公開
する予定ですので、作る過程から見届けていただけたら幸いです!





この記事では、企画から1ヶ月と少し経った、現時点の進捗状況を報告したいと思います。



現在、この企画は

企画
→UIデザイン
→開発
→テスト・調整
→諸準備
→公開・運用

という大きな流れの中で、「開発」の段階にあります。



具体的にいうと、前回Illustratorで描いたUIデザインに当てはめつつ、Unity上でゲームシステムの骨組み部分を作っている段階です。



早速、現時点でできているものを動画にしたので、よかったらご覧ください。↓



クソゲーな雰囲気がぬぐい切れてないのはさておき、、、

一応、ゲームの骨組みは完成しましたo(^-^)o

あとは足りないものを補っていくだけです。


この1ヶ月で、一から作り上げた割には進んでいるのではないでしょうか??

しかし完成まではまだまだです。

以下に、今まで実装してきた機能と、これからの仕上げに何をするかについて書いて行きます。



この1ヶ月で実装してきた主な機能

①シーンの骨組み

シーン構成は

  1. タイトル画面→ステージ選択画面
  2. ゲーム画面
  3. リザルト画面

の計3シーンで作りました。

タイトル→ステージ選択はシーンを分割せずに、スライドイン・アウトのアニメーションで遷移するようにしました。

それによって、単純なシーン遷移のような素っ気なさを減らしました。

②ゲームのシステム

ゲームシーンにおいて、洗濯バサミを二本指でピンチイン・アウトすることによってゲージ(ゆるメーター)がたまり、それがMAXになると「ゲームクリア」となり、MAXになるまでのタイムがスコアとなる仕組みにしました。

ゆるメーターは、フレーム間の洗濯バサミの開閉角度の差の絶対値を累積するという仕組みになっています。

つまり、洗濯バサミを速く開閉すればするほど、ゆるメーターも速くたまっていきます。

③複数のステージ

ステージを選択できるようにしました。

この「ゆるめろ!洗濯バサミ」(仮)では、ステージが変わると洗濯バサミのデザイン・動き・ゆるめやすさが変わるようになっています。(このままでは今一つ面白みに欠けますが)

現段階では3ステージ
Lv.1 普通の洗濯バサミ
f:id:sympacifica:20170816181115p:plain:w120,h150

Lv.2 木製の洗濯バサミ
(普通の洗濯バサミよりも可動域が狭い分、たくさん開閉しなければゆるめられない)
f:id:sympacifica:20170816181124p:plain:w60,h150

Lv.3 布団バサミ
(普通の洗濯バサミとは違い、内から外に向けて力を加えなければゆるめられない)
f:id:sympacifica:20170816181118p:plain:w105,h150

があります。

何かもう一捻りのあるステージ設定を考えて今後追加して行きたいです。

④洗濯バサミの動きのリアリティ

こちら↓の記事にて、二本指ピンチイン・アウトにより動かすことのできる洗濯バサミを作りましたが、

sympathy.hatenablog.com

sympathy.hatenablog.com

これでもちゃんと動きはするものの、実物の洗濯バサミのようなバネの反発の手応えがあまり感じられませんでした。

そこで、これを改良するため、今までタッチしている2点間の距離に一次関数的に従属させていた洗濯バサミの開閉角度を、二次関数的に従属させるように仕組みを変えました。(頭良さげ)

これにより、洗濯バサミをつまんでいけばいくほど開きにくくなるという、バネの反発を擬似的に表現することができました。

詳しい実装方法や具体的なスクリプトについてはできれば今度、別な記事にまとめたいと思います。
まとめました↓

sympathy.hatenablog.com





今後追加したい機能

①ランキング機能

全ユーザーのスコアがランキングされるようにしたいです。

そのためには、全ユーザーのベストスコアをサーバーで管理しなければなりません。

サーバーを立て、クライアントサイド・サーバーサイド両方のシステムをうまいこと作らなければならないので、大変そうです。。

②BGM

フリーBGMや、GarageBandで自作した曲をBGMとして流したいです。

ゲームに合ったBGMを流すことで、ゲームの質を底上げしたいです。

③アニメーションなどの充実

各所に動きをつけて行きたいです。

売れているアプリは、どんな場面にもいちいち動きが付いていると思います。

このアプリも、素っ気ないアプリにならないように仕上げて行きたいです。


他にも、スコアのSNS共有機能や、マネタイズを考えて広告表示の機能も追加して行きたいです。





以上、今まで実装してきた機能と、これから追加して行きたい機能について書いてきました。

現時点の仕上がりを客観的に見ると、当初公開までに2〜3ヶ月を見積もった割に早く仕上がってしまいそうです。

もちろん、能率よく早く仕上げることも大切ですが、コンセプトとの合致・クオリティの向上にも注意ながら時間をかけて練り上げていくのも大切なんじゃないかと勝手に思っています。

なので、このままのペースでどんどんイテレートして開発を続けて行きますが、あと1〜2ヶ月間試行錯誤を繰り返し、考え抜いて、満足のいく形で公開できればと思っています。

(洗濯バサミをゆるめるゲームという謎なコンセプトに限界がありそうでいつも不安ですが、、。)





おもしろいと思った方は、ぜひ「いいな★」またはSNSなどでのシェアをお願いします!


また、この記事に関してご質問やご指摘があればぜひコメントをお願いします。


最後まで読んでくださり、本当にありがとうございました。

文系大学生がスマホアプリを作って公開するまで ~デザインが大体決まりました~

こんにちは!
文系大学生のハゲ丸です٩(^‿^)۶





以前、「二本指で開閉する洗濯バサミを作る」という記事の中で、スマホ上でピンチイン・アウトで開閉する洗濯バサミを作りました。
(読んでいない方は、ぜひご覧ください↓)


sympathy.hatenablog.com

sympathy.hatenablog.com



そして私は今、その作った洗濯バサミを利用したスマホゲームを作り、公開するところまでを記していくという企画をやっています。
いつになるかは決めていませんが、最後の「公開編」では作り上げたアプリを実際にアプリストアで公開する予定ですので、作る過程から見届けていただけたら幸いです。

この記事は、その企画の「デザインが決まった」編です。
やっと、大雑把ですがUIデザインの案が出来上がったのでここに載せたいと思います。


↓タイトル画面
f:id:sympacifica:20170728215638p:plain

↓ステージ選択画面
f:id:sympacifica:20170728215631p:plain

↓ゲーム画面
f:id:sympacifica:20170728215611p:plain

↓リザルト画面
f:id:sympacifica:20170728215625p:plain



というような感じです。
かなりシンプルな見た目になりましたが、これから細かな機能の付け足しなどをしてデザインも微調整していきます。


しかしこのシンプルな見た目で作るからには、ゲームとしての面白さに力を注がなければならないのかもしれません。
「見た目もルールもシンプルだけど、その分手軽で、癖になるゲーム性のあるアプリ」にできたらいいですけれど、「洗濯バサミをゆるめる」という謎なコンセプトでゲームを作っている限り、いろいろ限界がありそうです。(笑)


でも「謎ゲー」としてのポジションで作り込んでいけばバズるアプリになる可能性は十分にあると思っているので、今後も着実に開発を進め、公開・運用するところまでいけたらと思います。





おもしろいと思った方は、ぜひ「いいな★」またはSNSなどでのシェアをお願いします!


また、この記事に関してご質問やご指摘があればぜひコメントをお願いします。


最後まで読んでくださり、本当にありがとうございました。

文系大学生がスマホアプリを作って公開するまで ~企画編~

こんにちは!
文系大学生のハゲ丸です٩(^‿^)۶





以前、「二本指で開閉する洗濯バサミを作る」という記事の中で、スマホ上でピンチイン・アウトで開閉する洗濯バサミを作りました。
(読んでいない方は、ぜひご覧ください↓)


sympathy.hatenablog.com

sympathy.hatenablog.com


ここでは、その作った洗濯バサミを利用したスマホゲームを作り、公開するところまでを記していきます。


いつになるかは決めていませんが、最後の「公開編」では作り上げたアプリを実際にアプリストアで公開する予定ですので、作る過程から見届けていただけたら幸いです。


今回は「企画編」ということで、どんなゲームアプリをどのように作るのかというのを明確にしたいと思います。




どんなゲームを作るか

まず、「何を何するゲームか」というのを決めました。


洗濯バサミを緩める」ゲームにします。笑


個人開発ゲームアプリにありがちな、シンプルでシュールな感じです。

ピンチイン・アウトで洗濯バサミを開閉するのを繰り返すことで、洗濯バサミのバネを緩ませていき、緩み切ったらクリアというイメージです。(まだぼんやりとしたイメージですが)


また、アプリは無料で販売することにします。

アプリ内課金をつけるかどうかについては、未定です。
つけるとしたら広告を消す、ステージの追加、洗濯バサミのデザインへの課金ということになりそうですが、今イメージする限りではどれもしっくり来ないので、まだ決めません。




どうやって作るか

  1. 期間
  2. 開発ツール
  3. 予算
  4. 開発手順


①期間
期間は2〜3ヶ月を予定しています。大学生ですので夏休みは時間が取れますから、多めに時間を注ぎ込むことにします。


②開発ツール
開発には「Unity」を使います。

また、見た目のデザインには「Illustrator」を使います。

もし、BGMをつける余裕があったら「GarageBand」で自作するかもしれません。


③予算
勉強のための書籍を購入するために¥5,000ほど。

もし、アプリ内で全国ランキング機能などのサーバーを必要とする機能をつけることがあればサーバーのレンタル費が加わります。

全体として、そこまでお金はかけるつもりはありません。


④開発手順
おおまかに、まず見た目のデザインを決め、次に最低限の機能を実装したゲームを作り、そこにデザインをあてはめ、最後仕上げをするという流れで作っていきます。





作るゲームについては以上です。(企画書としては甘々ですが。。汗)



個人開発なので、自分の好き勝手に作ることができるということを存分に活かして、

めちゃくちゃ面白くてバズるヒットアプリ

にできたらと思っています!



しかしアプリ一つ作るにも考えなければならないことが山ほどあって簡単にはいきませんが、なんとか続けていければと思います٩( ᐛ )و




おもしろいと思った方は、ぜひ「いいな★」またはSNSなどでのシェアをお願いします!


また、この記事に関してご質問やご指摘があればぜひコメントをお願いします。


最後まで読んでくださり、本当にありがとうございました。

【アプリ開発】二本指で開閉する洗濯バサミを作る 〜完結編〜【Unity】

前回に引き続き、二本指タッチで動く洗濯バサミ(使い道は謎)を作っていきます!
(読んでいない方はぜひ前回の記事↓からご覧くださいm(_ _)m)

sympathy.hatenablog.com



今回で洗濯バサミは完成となります!
(↓の動画と同じものができ上がります。)
 



【アプリ開発】洗濯バサミ作ってみた!笑(完成品)【Unity】
 


スクリプトで実装したい機能は以下の3つです。
 

  1. 洗濯バサミを二本指でドラッグできるようにする
  2. タッチしている二点の角度に合わせて洗濯バサミを回転させる
  3. ピンチイン・アウトで洗濯バサミを開閉する

 
これらの機能を一つずつ記述していきます。



※以下の内容は前回(part1)でできあがったものを前提としています。

※また、プログラミング初心者であるゆえ不適切なプログラムの書き方などをしている恐れがありますので、参考にする程度で見ていただきたいです。



では行きましょう!
 
 

①洗濯バサミをドラッグ移動させる機能

 
「ドラッグ移動」とは、言い換えるとすなわち、
→「タッチしている位置を取得し、その位置に移動する」
 

ということですね。
しかし今回の洗濯バサミは「二本指」でドラッグしたいので、


→「タッチしている二点のちょうど真ん中の位置を算出し、その位置に移動する」
 

ということにします。

なのでまず、タッチを取得していきます。

// まずUnityEngine.UIをusingしておいてください

// PanelとそれぞれのパーツのImageを宣言しておきます
public GameObject pinPanel;
public Image ringImage;
public Image leftPartImage;
public Image rightPartImage;

// Updateの中に書きます
void Update () 
{
    // 二本以上の指でタッチしているとき
    if (Input.touchCount >= 2)
    {
        // Touchを取得する
        Touch touch1 = Input.GetTouch (0);
        Touch touch2 = Input.GetTouch (1);
 
         /****************************

        ここにtouch1とtouch2を使って機能を記述していきます

        *****************************/
    }
}


Touchは↑このように「Input.GetTouch」で取得できます。
さらにその位置は「.position」(Vector3型)で取得できます。(簡単ですね!)


それを使って記述するとこうなります↓(完成形)。

// 二点の座標の差を求めます
float dx = touch2.position.x - touch1.position.x;
float dy = touch2.position.y - touch1.position.y;

// パネルの位置を移動します
pinPanel.GetComponent<Image> ().transform.position = new Vector3(touch1.position.x + dx / 2, touch1.position.y + dy / 2, 0);


ちょうど真ん中の点なので、二点の座標の値を2分の1してtouch1の座標に加えればいいですね。
パネルごと移動させるので、それに乗っかったパーツが全て一緒に移動します。



これで洗濯バサミをドラッグ移動させる機能は完成しました!




②二本指ドラッグで洗濯バサミを回転させる機能

ここでの考え方は、①とあまり変わりません。
①は「位置」を計算しましたが、②では「角度」を計算します。


二点を結んだ線と水平とがみたす角度を求め、その角度にパネルを回転させればいいわけです。


では、二点のタッチから角度を求めていきます。

そこで、「Mathf.Atan2」という関数を使います。
この関数は、引数に直角三角形の高さ底辺を渡すと角度を(ラジアン単位で)返す関数です。
文系なりに図を描いてみました↓。

f:id:sympacifica:20170628212635p:plain


この関数に、さきほど①で求めた二点の座標の差(dyとdx)を渡せばいいですね!


そうして記述するとこうなります(完成形)↓

// 回転すべき角度を求めます(ラジアン単位をオイラー単位に直すのを忘れずに!)
float angle = (float)(Mathf.Atan2 (dy, dx) * 180 / Math.PI);

// パネルを回転します
pinPanel.GetComponent<Image> ().transform.eulerAngles = new Vector3 (0, 0, angle);


ラジアン角をオイラー角に変換するには、「ラジアン * 180 / π」でできます。
こちらもパネルごと回転させるので、それに乗っかったパーツが全て一緒に回転します。



これで洗濯バサミをドラッグで回転させる機能は完成しました!




③ピンチイン・アウトで洗濯バサミを開閉する機能

ここでの考え方は、①や②とは違います。



「ピンチイン・アウトで洗濯バサミを開閉する」を再現するには、
二点間距離を洗濯バサミのパーツの回転角度に反映すればいい訳です。



洗濯バサミの左パーツの動きを基準に考えると、二点間距離が狭まると(つまむと)、洗濯バサミの左パーツはz軸正の方向に回転し、二点間距離が広くなると(開くと)、洗濯バサミの左パーツはz軸負の方向に回転します。(右パーツはその逆の方向に同じだけ回転するようにすればいいですね。)



では、二点間距離を算出して、それに対して一体どれぐらいの回転角度に対応させればいいのか。



私が何度も数値をいじりながら実験を繰り返した結果、

「左パーツの回転角度 = -0.03 * 二点間距離 + 30」

↑この関係式が満たされれば最も自然な洗濯バサミの開き具合が再現できる、という結論に至りました。
(少なくとも私のテストデバイス上では最適でした。)



ではこれをスクリプトに書いて行きます。

// 二点間距離をピタゴラスの定理で算出します
float width = (float)(Math.Sqrt (Math.Pow (dx, 2) + Math.Pow (dy, 2)));

// z軸の回転角度を計算します
float leftPartAngle = -0.03f * width + 30;

// パーツを回転させます(localEulerAnglesは親のパネルからみた相対的な回転角度です)
leftPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, leftPartAngle);
rightPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, -leftPartAngle);


これで、ピンチイン・アウトで洗濯バサミを開閉する機能は完成しました!





と言う訳で、以上で①〜③の機能は全て記述することができました!

では、全ての機能を記述したスクリプト全体を見てみましょう↓。
(仕上げとして、オマケ機能①〜③が追加されています。)

public GameObject pinPanel;
public Image ringImage;
public Image leftPartImage;
public Image rightPartImage;

void Update () 
{
	// 二本以上の指でタッチしているとき
	if (Input.touchCount >= 2) {
		Touch touch1 = Input.GetTouch (0);
		Touch touch2 = Input.GetTouch (1);
		
		// オマケ機能①:タッチした順序で洗濯バサミの向きが180度変わってしまうのを防ぐ機能
		if (touch1.position.y > touch2.position.y) {
			Touch t = touch1;
			touch1 = touch2;
			touch2 = t;
		}


		// 位置の差を計算しておく
		float dx = touch2.position.x - touch1.position.x;
		float dy = touch2.position.y - touch1.position.y;


		// ①パネルの位置移動
		pinPanel.GetComponent<Image> ().transform.position = new Vector3(touch1.position.x + dx / 2, touch1.position.y + dy / 2, 0);


		// ②パネルの回転
		float angle = (float)(Mathf.Atan2 (dy, dx) * 180 / Math.PI);
		pinPanel.GetComponent<Image> ().transform.eulerAngles = new Vector3 (0, 0, angle);


		// ③洗濯バサミの開閉
		float width = (float)(Math.Sqrt (Math.Pow (dx, 2) + Math.Pow (dy, 2)));
		float leftPartAngle = -0.03f * width + 30f;

		leftPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, leftPartAngle);
		rightPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, -leftPartAngle);


		// オマケ機能②:バネの輪っかの見た目を自然にする機能
		ringImage.GetComponent<Image> ().fillAmount = 1 - leftPartAngle / 180;
		ringImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, -leftPartAngle);
	}
	// オマケ機能③:指を離しているとき、洗濯バサミを閉じる機能
	else {
		leftPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, 0);
		rightPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, 0);
		ringImage.GetComponent<Image> ().fillAmount = 1;
	}
}


以下、簡単にオマケ機能の説明をします。




オマケ機能①:タッチした順序で洗濯バサミの向きが180度変わってしまうのを防ぐ機能

GetTouch(0)とGetTouch(1)の順序はタッチした順序で決まるので、タッチした位置が同じでもタッチの順序が変わるとtouch1とtouch2が逆になってしまい、見た目が180度回転した形になってしまいます。


なのでここでは、右手でのみ操作することを想定し、洗濯バサミが常に左を向くようにしました。

// touch1のposition.yが、touch2のposition.yより大きくなってしまっているとき
if (touch1.position.y > touch2.position.y) {
	Touch t = touch1;
	touch1 = touch2;
	touch2 = t;
}


常にposition.yの値が小さい方がtouch1、大きい方がtouch2となるようにしています。




オマケ機能②:バネの輪っかの見た目を自然にする機能

下準備として、Unityエディタの方でバネの輪っかの画像「ringImage」のImage Typeを「Fill」に設定しておく必要があります。「Fill」を使うと、画像を扇形のように描画することができます。(詳しくはUnityのレファレンスなどを見てください)


今回は、洗濯バサミのはさむ部分だけを描画「させない」ようにしたいので、「fillAmount」を求めると、


fillAmount = (360 - 描画しない角度) / 360(角度(0~360)をfillAmount(0~1)の値に直したいので360で割ります)
→fillAmount = (360 - leftPartAngle * 2) / 360
→fillAmount = 1 - leftPartAngle / 180

という計算式になります。


これだけでは洗濯バサミのはさむ部分と、バネの輪っかの描画されていない部分との位置が合わないので、合わせるようにバネの輪っかを回転させます。
(時計回りにfillされるので、右パーツと同じ回転角度にすればいいですね。)

ringImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, -leftPartAngle);


どうしても説明がわかりにくくなってすみません。(汗)




オマケ機能③:指を離しているとき、洗濯バサミを閉じる機能

これは簡単で、Input.touchCount(タッチの数)が1以下のときはパーツを閉じれば良いので、

// タッチの数が2以上のとき
if (Input.touchCount >= 2)
{
	// ほげほげ
}
// タッチの数が1以下のとき
else {
	leftPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, 0);
	rightPartImage.GetComponent<Image> ().transform.localEulerAngles = new Vector3 (0, 0, 0);
	ringImage.GetComponent<Image> ().fillAmount = 1;
}


となります。





ということで、オマケを含め全ての機能のスクリプトの記述を説明し終えました。
(言葉足らずな説明になってしまい、申し訳ありませんでしたm(_ _)m)



今回で目的の洗濯バサミを完成できた訳ですが、、、

次回からはこの洗濯バサミを使ったゲームを作っていきたいと思います!


まだどのようなゲームにするかははっきりしていませんが、完成したらGooglePlayやAppStoreに公開するところまでできればと思っています。


なので次回からは「文系大学生がアプリを作って公開するまで」というタイトルで開発の進捗状況をブログに書いていきます!笑


応援していただける方は、ぜひ「いいな★」またはSNSなどでのシェアをお願いします!


また、この記事に関してご質問やご指摘があればぜひコメントをお願いします。


最後まで読んでくださり、本当にありがとうございました。

【アプリ開発】二本指で開閉する洗濯バサミを作る 〜準備編〜【Unity】

こんにちは!
文系大学生のハゲ丸です(☝︎ ՞ਊ ՞)☝︎
 
 
 
 
 
 
文系・プログラミング初心者な私は今、Unityでのスマホ2Dゲーム開発を勉強しています。
 
そこで、スマホのタッチ操作によるゲームオブジェクトの移動と回転の制御を習得すべく、
 
「二本指で開閉する、洗濯バサミ」(使い道は謎)
 
を作ってみたので、超大雑把な作り方を書き残していこうと思います。
 
 
 
 
 
 
 
想定している読者は、 
  • 文系だけどスマホアプリ開発をしてみたい人
  • 僕と同じUnity超初心者
  • 洗濯バサミを二本指タッチで動かすゲームを作りたい人(おそらくいない)
です。
 
 
 
 
 
※Unityプログラミング超初心者であるゆえ、不適切なプログラムの書き方などをしている恐れがありますので、参考にする程度で見ていただきたいです。
 
 
 
 
 
ではさっそく作っていきます!
 
そのまえに、完成品はこちらです↓
 
 
 
 
これを作っていきます。(真顔)
 
 
①まず、↓のような画像素材を作ります
 

f:id:sympacifica:20170621232744p:plain

 
画像素材は、
  • 洗濯バサミの左パーツ
  • 洗濯バサミの右パーツ
  • バネの針金
の三つに分けて、それぞれ.pngで書き出します。
 
ちなみに、パーツのサイズは
 

f:id:sympacifica:20170622124849p:plain

f:id:sympacifica:20170622115352p:plain

f:id:sympacifica:20170622115357p:plain

 

サイズはこんな感じです↑。
わかりづらくてすみません(汗)。
 
 
②次は、早速Unityでの作業になります
 
今回は、このブログ用に新規2Dプロジェクトを作成しました。
 
2DObjectの「Sprite」を使うかuGUIの「Image」を使うか迷ったんですが、今回の洗濯バサミには物理演算処理を使わないので、uGUIの「Image」を使うことにしました。
 
(SpriteかImageかについては、こちらのUnityの質問板のSimonDarksideJさんの回答を参考にさせていただきました。)
 
また、全部のパーツをセットで扱いたいので、透明なPanelを一つ作ってその上にパーツを乗せる形にしました。
 
サイズと位置を調整し、洗濯バサミのパーツの回転軸(Pivot)も設定します。
(ここでパーツの回転軸をキリのいい位置にしたことが活きてきます。)

 

左パーツImageのPivot:(X, Y, Z)=(0.8, 0.6, 1)

右パーツImageのPivot:(X, Y, Z)=(0.2, 0.6, 1)

 

するとこうなります↓

 

f:id:sympacifica:20170622122108p:plain

 
試しにRotationのzの値をいじってみました↓

 

f:id:sympacifica:20170622122215p:plain

 
正しい位置で回ってくれてます!
ちゃんとそれっぽいですよね!笑
 
 
でも、これではまだ動かすことができませんし、輪っかが不自然になっちゃってます。
 
 
ここからはプログラムを書いて完成させていきます!
 
 
 
 
長くなるので、ここで一旦切ります。続きは完結編へ!
 

【情報技術者】基本情報に合格しました!【文系でもイケる!】

こんにちは!

文系大学生のハゲ丸です٩( ᐛ )و

 

 

 

私ハゲ丸、情報技術とは無縁の文系学部に所属しながら独学し、平成28年度秋期の基本情報処理技術者試験(FE試験)を受検し合格したので、それに関する話をしたいと思います。

 

 

 

得点などは以下の通りです↓

f:id:sympacifica:20170622175832p:plain

合格しました!

 

午前・午後ともに八割得点できたので大満足です。

 

 

 

ここでは、私が使った教材の紹介と受けた感想を、独学・文系学生の視点から書いていきたいと思います。

 

 

 

①私が使った教材の紹介

 

専門学校、塾、予備校などに行く気はなかったので、主に書籍で学習しました。

受験のために使った教材はこちら↓の参考書です。(平成28年度版です)

家電量販店の小さな書籍コーナーに数冊置いてあった基本情報受験用の教材の中から、安易に「いちばん売れてる」という文言に引かれて選びました。

 

使ってみた結果、この教材は「試験合格のために」必要な知識が厳選されて載っているように思えました。

 

 

表紙の上部にある「イメージクレバー方式」という言葉は、この教材の提唱する学習法のことで、「イメージ」と「クレバー」によって学習を効率化したり理解を深めたりすることを図っています。

 

イメージ」というのは、この教材には単元ごとに内容に関連した挿絵が載っているので、図的イメージで捉えることで理解を深め記憶を定着させようとする考え方です。

 

クレバー」というのは、この教材の文章の途中に度々挿入されている「〇〇 とくれば  △△」という短いフレーズの中の「くれば」(クレバー)に由来するらしいのですが、例えば

キュー とくれば 先に入ったものから先に出る(FIFO

といったように、知識と知識を「とくれば」で結びつけるシンプルなフレーズを使ってわかりやすく暗記しようという考え方です。

 

私の個人的な意見としては、どちらも学習の効率を高めてくれますが、「クレバー」学習法は、暗記が簡単なシンプルなフレーズが使われている分多くの情報が排除されてしまっているので、どうしても局所的で狭い知識の詰め込みになりがちになってしまう気がします。

 

基本情報技術者試験ではマークシートの選択式なので、問題文と選択肢に出てきたキーワードから「くれば」の知識を思い出すことによって正答できるということは大いにあります。そのようにして合格点をとることも可能です。

 

ですが、基本情報受験の延長線上に高度試験の受験も考えている人などにとっては特に、基本情報の合格のために必要な知識だけを蓄えていては不十分であるように思えます。

 

とはいっても、そもそもこの教材は基本情報技術者試験合格のための教材なので、それで良いのですが。

 

履歴書にかくため・昇給のためなど、合格を目的としている人にとっては非常に効果的な教材だと思うので、ぜひおすすめしたいです。ちなみに最新版はこちらです↓

 

 

長くなりましたが、参考書の紹介は以上です。

 

 

 

②受けた感想

短く書きますが、単純に、受かって嬉しかったです。それに、勉強したことでITに詳しくなった気になれて楽しいです。

文系の人も、あると可能性が広がりますし、覚えるべきことを覚えれば受かる試験なので、時間や体力に余裕のある方なら受けてみることをオススメします。

 

 

 

最後まで読んでいただいた方、ありがとうございます。

よかったら他の記事も読んでいただけたら幸いです。