![見出し画像](https://assets.st-note.com/production/uploads/images/120404265/rectangle_large_type_2_1e913e59d256b5202965415c2631dde7.png?width=800)
【Unity C#】2Dスライドパズル(15パズル)の作り方 #1 プロジェクト作成
こんな感じの完成を目指します
![](https://assets.st-note.com/img/1698676271381-G71uBB5yz0.png?width=800)
![](https://assets.st-note.com/img/1698676432707-y9HO5Pljx3.png?width=800)
プロジェクト作成
UnitHubからNew project
![](https://assets.st-note.com/img/1698655116333-CTp290HLsK.png?width=800)
環境
Editor Version 2021.3.22f1(推奨)
2Dテンプレート
![](https://assets.st-note.com/img/1698655381030-Zi6TRPLI0B.png?width=800)
Project Name
プロジェクトに関するファイルが保存されるフォルダになります
自由にきめて頂いて構いませんが、今回は
SlidePuzzle
という名前で作ります
Location
プロジェクトを保存する場所になります
自由にきめて頂いて構いませんが、今回は
Desktop
に作っていきます
ここから下の項目がない場合は、Create Projectを選択してください
Unity Cloud Organization
Unityのプロジェクトをクラウド上で管理するためのグループのようなものになります。
個々のアカウントに紐付くグループですので、任意のグループを選択してください。(デフォルトのものでいいと思います)
Connect to Unity Cloud
Unityのクラウドサービスに接続するためのオプションです。
今回はクラウドに関する機能は使いませんのでチェックマークは外しておきます。
![](https://assets.st-note.com/img/1698655396326-QBBnqWm7mH.png?width=800)
プロジェクト作成
「Create Project」を押したら
プロジェクトを作成中に、この記事の1番下に添付されている
【SlidePuzzlePack.zip】
をダウンロードして解凍しておいてください
初期設定
アセットインポート
プロジェクトが作成できたら
解凍しておいた
【SlidePuzzlePack】
をプロジェクトビューにドラッグアンドドロップして
プロジェクトにインポートします
![](https://assets.st-note.com/img/1698655428095-srfmACcbfK.png?width=800)
ビューを設定
エディタのビューを使いやすい配置に変更して
Gameビューの画面サイズをFreeAspectに変更します
![](https://assets.st-note.com/img/1698656410241-f5DlozlYqa.png?width=800)
シーン名を変更
プロジェクトビュー>Scenes>SampleSceneを
SlidePuzzleSceneへ変更
確認ウィンドウのReloadボタンを押して
ヒエラルキーのシーン名が変更された事を確認します
![](https://assets.st-note.com/img/1698656563118-5wMppjCkB5.png?width=800)
ゲームオブジェクト配置
ピースを配置
SlidePuzzlePackフォルダの
piece_01〜04のピースを順番にHierarchyにドラッグアンドドロップします
Hierarchy上でpiece_01〜04のオブジェクトを
シフトを押しながら4つ選択して
y座標だけを1.5に設定して、横のラインだけ揃えます
同じように
piece_5〜8のy座標だけを0.5
piece_9〜12のy座標だけを-0.5
piece_13〜15のy座標だけを-1.5
に設定していったん全てのピースの横のラインだけ揃えます
![](https://assets.st-note.com/img/1698656617029-9FeXIU6dAx.png?width=800)
次にxをセットして縦のラインを揃えます
piece_1,5,9,13のx座標を-1.5
piece_2,6,10,14のx座標を-0.5
piece_3,7,11,15のx座標を0.5
piece_4,8,12のx座標を1.5
に設定して以下のような並びになればOKです
![](https://assets.st-note.com/img/1698656636524-0liTS8NOml.png?width=800)
当たり判定の設定
piece_1〜15までを全て選択して
Add ComponentからBoxCollider2Dを追加します
![](https://assets.st-note.com/img/1698656796652-Iifdp1EkFv.png?width=800)
透明な0番のピースを追加
Hierarchyを右クリック
2D Object > Sprites > Squareを選択
ドラッグ&ドロップで並び順をpiece_01の上に移動して
オブジェクト名を
piece_00
に変更座標をx:1.5,y-1.5に設定
![](https://assets.st-note.com/img/1698656891601-dtTdF46xFZ.png?width=800)
最後にカラーのα値を0にして
![](https://assets.st-note.com/img/1698657070376-yRz8vV8sS9.png?width=800)
![](https://assets.st-note.com/img/1698657240031-VEQtdGkQhw.png?width=800)
透明な0番のピースが左下に配置されたら
0番のピースは完成です
![](https://assets.st-note.com/img/1698656913867-BBfvIWH3er.png?width=800)
UI配置
リトライボタンを追加
Hierarchyを右クリック
UI > Button - TextMeshProを追加
Import TMP Essentialsをクリック
![](https://assets.st-note.com/img/1698684811636-NAnWicQfje.png?width=800)
オブジェクト名を
ButtonRetryに変更
Positionを
x:0,y-200に設定
子オブジェクトのテキスト表示を
RETRY
に変更します
![](https://assets.st-note.com/img/1698655118386-7xVuOVWjTi.png?width=800)
以上でこのレクチャーは完了です。
SlidePuzzlePack.zip
この記事が気に入ったらサポートをしてみませんか?