ゲーム開発初心者がUnityでパズドラもどきを作ってみた。part2(ドロップの操作)

ゲーム開発初心者がUnityでパズドラもどきを作ってみた。part2(ドロップの操作)

<前回までのあらすじ>チュートリアルを卒業して、自分でゲームを作ってみることにした

沙知です。
今日は「パズドラもどきを作ってみた」シリーズのpart2をお届けします。

▼ 前回の記事

このシリーズの主旨は
チュートリアル卒業したてのゲームプログラマ見習いが
頭を抱えながらUnityで「パズドラもどき」を形にしていく様子
を振り返り
学んだ内容を記事として 晒して 残しておく、というものです。

最短ルートでパズドラのようなゲームを作りたい!!」という方向けの記事ではありませんので、お気をつけください。

ひとりでどこまでできるか、挑戦!

<1部> ひとりでどこまでできるかな編 ←いまここ
<2部> RV後ブラッシュアップ編

ひとりでどこまでできるか」というキーワードのとおり
今回は、設計や実装方法なども含め、1から自分で考えていきます。

……が….とはいえ、チュートリアルを体験したくらいじゃあ、さすがに知識が浅すぎるんですよねw
全くのノーヒントでは手も足も出ません。
よって以下のルールで、情報を仕入れながら作っていきました。

禁止
・ネットに転がってる「パズドラ作ってみた」系の情報を得る

許可(むしろ推奨)
・Unityの機能に関する情報を得る
・C#の文法に関する情報を得る
・ゲーム開発技術に関する情報を得る

そもそもプログラマは、技術について調査しながら実装していくのが一般的(だと思っている)。
積極的にググっていくが吉ですw

Google先生がいるからひとりじゃない!!

なお、今回の題材は、かの有名なパズドラ。
公式アプリという「正解」が存在するわけなので、「パズドラを実際にプレイする」のももちろんOKです。

ユーザー操作部分を実装する

こちらが、今回作ろうとしているパズドラの「パズルゲーム」部分です。

画面を構成している要素は「ドロップ」のみです。
赤/青/黄/緑/紫/ピンクの6色で、横6✕縦5の合計30個並んでいます。

画面に素材を配置する

とりあえずシンプルに、こんな画像を用意しました。

白く塗りつぶした丸で、背景は透過してあるPNGファイルです。
チュートリアルで「ゲームオブジェクトの色はUnity上で変更できる」と学んでいたので、ドロップの素材はこれで全色いける。

ついでに、ゲーム画面の背景も用意しました。
(本当はドロップを惑星にして、宇宙みを出したかったw)

画面へ素材を配置
・Assetsフォルダ直下にSpritesフォルダを作って、素材を格納
・ProjectビューからSceneビューへドラッグアンドドロップ
・ドロップの座標は「2」ずつずらす
 [例] 中央(0, 0) 中央上(0, 2) 中央下(0, -2)

ドロップをクリックして操作できるようにする

次は、配置したドロップを操作できるようにします。
確か…C#でスクリプトを書いて、ゲームオブジェクトに設定してやればいいんです。

…わたしにとってはここから既に未知の領域です。
なんせ前回のチュートリアル(ブロックくずし)では、すでにスクリプト用意されていたので…

写経してしまえば
ボンヤリした理解でも、ちゃんと実装できたw

悩んでも仕方ないので、とりあえず知っているシンプルな処理を書いてみることにしましたw

using UnityEngine;

public class DropController : MonoBehaviour
{
    /**
     * クリックしたときの処理
     */
    void onMouseDown()
    {
        Debug.Log("クリック");
        // 消★滅
        Destroy(gameObject);
    }
}

ブロックくずしのスクリプトを参考にしながら。

ドロップをクリックして操作
・マウスで対象をクリックしたときの処理はonMouseDownに定義
・Debug.Logでコンソールにログを出力
・Destroyメソッドは、ブロックくずしでブロック消す時に使ってたやつ
(引数のgameObjectは、このスクリプトをくっつけてるドロップのこと)
→ クリックしたら消える&ログが出るドロップになった!

ちゃんと言うこときいてくれるw安心w

ほいで、パズドラのドロップ操作は
タップする(選択)→そのままドラッグ(移動)→指離す(固定)
って感じだから…

using UnityEngine;

public class DropController : MonoBehaviour
{
    /**
     * クリックしたときの処理
     */
    void onMouseDown()
    {
        Debug.Log("選択");
    }

    /**
     * ドラッグされている間の処理(フレーム)
     */
    void onMouseDrag()
    {
        // マウスの動きに合わせてドロップが動く
    }

    /**
     * クリックを離したときの処理
     */
    void onMouseUp()
    {
        Debug.Log("固定");
    }
}

多分こんなん。イベントリスナー用意しただけだけど。。

ポイントは、onMouseDragイベントで「マウスの動きに合わせてドロップが動く」をどう実装するか。
単純に、「マウスカーソルの位置=ドロップの中央座標」になってればOK。
こいつはフレームごとのイベントだから、ワ〜〜って何回も処理が繰り返されるわけです(?)。
つまり、カーソルの座標を繰り返し取ってきて、ドロップの座標をそれに繰り返し合わせる、っていう。

働き者だね…ありがと…

次回こそ、ドロップを動かせるさ…

と、かなり中途半端ではありますが
1記事のボリュームの限界を迎えそうなので、ここで一旦区切りたいと思います。

「ドロップを操作できるようにする」とかいいつつ、Destroyしただけだから
ちょっとした見出し詐欺だなw

でも座標の話とか始めたら長くなるんですよ…
ポンコツすぎてけっこう紆余曲折したんで…

ということで
次回はちゃんとドロップをグリグリできるようにします。

本日もお付き合いいただきありがとうございました!

[Eye catch image] Photo by David Menidrey on Unsplash

IT / プログラミングカテゴリの最新記事