初心者向け!WindowsでReactNative入門~イントロダクション~

f:id:enia:20210920191627p:plain

えにあです。 諸事情によりReactNativeの勉強をすることになりました。 これから学習の経緯を記録していきたいと思います。

私はReactでの開発経験はありますが、ReactNativeは昔少し触ったことがある程度です。開発環境を一から作るところから始めたいと思います。

環境

Windows10 Home Edition 64ビット

本当はWSL2上で開発できるようにしたかったのですが、色々と難しかったので挫折しました。 挫折の経緯はいつかまた書きます。

React Nativeとは

モバイルアプリの開発方法は大きく2つの方法があります。 ①iosandroidそれぞれに用意された開発言語を使って開発する方法 ②両方のOSに対応したアプリケーションを一つのソースコードで開発するためのクロスプラットフォーム対応フレームワークを利用する方法

React Native は Facebook 社製のオープンソースクロスプラットフォーム対応のモバイルアプリ開発フレームワークです。 クロスプラットフォーム対応のフレームワークには他にもGoogle製のFlutterがあります。

どの開発方法が適しているかは目的や重視するポイントによって変わります。 クロスプラットフォームを前提としてReactNativeとFlutterを比較すると、勢いとしてはFlutterのほうが上のように思います。一方で、情報量の多さではReactNativeのほうが上であり、入門としてはReactNativeのほうが入りやすいのではないでしょうか。私のようにReact経験がある方の場合は、特にとっつきやすいのではないかと思います。

少なくとも、現時点でReactNativeがオワコンと化したわけではないですし、ReactNativenに取り組むことは無駄にはならないはずです。 一緒に頑張って勉強していきましょう。

次回以降、まずは環境構築から進めていきます。 今回はここまで!

VSCodeをWSL2用にセットアップする

f:id:enia:20210912185047p:plain

えにあです。

以前、WSL2上でNode.jsを動かす方法を記事にしました。今回はその続きです。 今回はWSL2で快適に開発するシリーズの第二弾として、VSCodeをWSL2用にセットアップする方法を記載します。VSCodeはWSL2用にセットアップすることで爆速になるのです。
enia.hatenablog.com

この記事は下記公式ドキュメントを参考にしています。当然ですが情報源は公式ドキュメントが一番信頼できます。
code.visualstudio.com

目次

環境

作業の目的

以下の画像を見てみましょう。この画像はWindows側で行う処理と、Linux側で行う処理を表しています。 f:id:enia:20210912150525p:plain

Windows側にVS Codeが、WSL側にVS Code Serverがあります。
そして、VSCode ServerがFileSysytemへのアクセスを行っています。ここがポイントです。

Windows側のVSCodeはServerにアクセスするためのUIの役割だけを行って、処理自体はVSCode Serverで行うのです。 VSCodeServerはWSL上で動いているので、WSL上のFileSystemへはLinuxベースの高速アクセスが可能になります。 WindowsVSCodeから、直接WSL上のFileSystemにアクセスすると、非常に低速になりますし、ファイルが壊れる原因にもなります。 逆もまた然りで、WSL側からWindows側のFileSystemにアクセスすると、ファイルが壊れる原因になります。そのため、VSCodeServerから下に伸びている、WindowsのFileSystemからマウントしたボリュームへのアクセスはグレーになっており、非推奨であることがわかります。

Remote - WSL プラグインをインストールする

VSCodeを起動し、拡張機能で「Remote WSL」と入力します。
表示された「Remote - WSL」のインストールボタンを押下します。

f:id:enia:20210912150324p:plain

検索ワードを削除して、「Local - インストール済み」の欄に「Remote - WSL」が表示されればインストール成功です。

ここで一度VSCodeを閉じましょう。

f:id:enia:20210912190437p:plain

WSL2上をRemote起動する

WSL2上で作業ディレクトリを作成して移動します。 私は以下を作業ディレクトリとして進めます。

enia:~/learning/sample$> pwd
/home/enia/learning/sample

作業ディレクトリ内でcode .を実行します。

enia:~/learning/sample$> code .
Installing VS Code Server for x64 (e7d7e9a9348e6a8cc8c03f877d39cb72e5dfb1ff)
Downloading: 100%
Unpacking: 100%
Unpacked 1828 files and folders to /home/enia/.vscode-server/bin/e7d7e9a9348e6a8cc8c03f877d39cb72e5dfb1ff.
enia:~/learning/sample$

vs codeが起動するはずです。
以下の警告が出るので作成者を信頼します。

f:id:enia:20210912152833p:plain

エクスプローラでプロジェクト名の後ろに[WSL: UBUNTU]とj表示されていればLinux上でWSLが起動しています。
f:id:enia:20210912153309p:plain

「メニューバー」->「ターミナル」->「新しいターミナル」でターミナルを起動してみます。 f:id:enia:20210912190906p:plain

WSLのbashターミナルが起動されているのがわかります。ここでビルド等を行うことで、windowsよりもはるかに高速に処理することができます。
f:id:enia:20210912191009p:plain

終わりに

今回はVSCodeをWSL2用にセットアップする方法を記載しました。 VSCodeでコードを書いて、そのままWSL2のターミナルでビルド処理ができるので、開発効率が格段に上がります。 今回はここまで!

WSL2上でNode.jsを動かそう

f:id:enia:20210912174453p:plain えにあです。

以前、Windows10上にLinux環境(WSL2)を構築する記事を書きました。
次は、構築したLinux環境上で開発を行えるようにしていきます。
今回は、LinuxにNode.JSをインストールしていきます。
enia.hatenablog.com

この記事は下記NodeJS公式の記事を参考にしています。当然ではありますが、公式サイトの情報が一番信頼できます。
nodejs.org

NOTE: なぜLinux上で開発を行うの?
プログラミングはWindows環境でも問題なく行えます。
しかし、ソースコードの量がある程度増えてくると、ビルドに時間がかかってくるようになります。
よほど大きなシステムでない限り、1~2分程度の時間かもしれません。その程度であれば我慢できるでしょうか?
しかし、ソースコードを少し修正して動作確認をするたびに待ちが発生すると、開発のリズムが崩れ、開発が楽しくなくなってしまいます。
Linux環境でビルドすると、Windows環境の半分程度の時間でビルドできます。
開発をより楽しいものにするために、Linux環境で開発できるようにするのです。
また、仕事でシステム開発を行っている場合は、本番システムはLinux環境で動いていることが多いのではないでしょうか。
ローカル開発でもLinux環境を利用することは、本番環境との差異を小さくすることにも繋がります。


目次

環境

  • OS: Windows10 Home Edition (x64)
  • WSL2: Ubuntu 20.04

以下の手順はwsl上で行います。Windows Power Shell上ではないことに注意してください。

公式ドキュメントからインストール手順を探す

公式ドキュメントの最下部に移動すると、WSLのインストール方法へのリンクが記載されてます。 f:id:enia:20210910073946p:plain

リンクを押下するとMicrosoftのページへ遷移します。
Mircrosoftの記事であれば、情報源として安心できそうです。
docs.microsoft.com

aptライブラリのインデックスを更新する

この後の手順でパッケージをインストールする際にはapt-getを利用します。
sudo apt-get updateを実行し、APTライブラリのインデックスを更新します。
よくわからなければ、apt-getで環境構築する際の事前のおまじないだと思ってください。

enia:~$> sudo apt-get update

Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]
Hit:2 http://archive.ubuntu.com/ubuntu focal InRelease
Get:3 http://security.ubuntu.com/ubuntu focal-security/main amd64 Packages [861 kB]
Get:4 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
~中略~
Get:40 http://archive.ubuntu.com/ubuntu focal-backports/universe Translation-en [2068 B]
Get:41 http://archive.ubuntu.com/ubuntu focal-backports/universe amd64 c-n-f Metadata [276 B]
Get:42 http://archive.ubuntu.com/ubuntu focal-backports/multiverse amd64 c-n-f Metadata [116 B]
Fetched 20.0 MB in 24s (826 kB/s)
Reading package lists... Done

curlをインストールする

この後の手順で、コマンドラインでインターネットからコンテンツをダウンロードするために使用するツールである、curlを利用します。
sudo apt-get install curlcurlをインストールします。
私の場合、すでに最新バージョンだったようです。

enia:~$> sudo apt-get install curl 

Reading package lists... Done
Building dependency tree
Reading state information... Done
curl is already the newest version (7.68.0-1ubuntu2.6).
curl set to manually installed.
0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded.

nvmをインストールする

多くの場合、作業しているさまざまなプロジェクトのニーズに基づいて、複数の Node.js のバージョンを切り替える必要があります。 ノード バージョン マネージャー (一般的には nvm と呼ばれることが多い) は、Node.js の複数のバージョンをインストールするための最も一般的な方法です。 ここでは、nvm をインストールしてからそれを使用して Node.js と Node Package Manager (npm) をインストールする手順について説明します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bashで、nvmをインストールします。

enia:~$> curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash 

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 13527  100 13527    0     0   5945      0  0:00:02  0:00:02 --:--:--  5945
=> Downloading nvm from git to '/home/enia/.nvm'
=> Cloning into '/home/enia/.nvm'...
remote: Enumerating objects: 290, done.
remote: Counting objects: 100% (290/290), done.
remote: Compressing objects: 100% (257/257), done.
remote: Total 290 (delta 34), reused 111 (delta 20), pack-reused 0
Receiving objects: 100% (290/290), 163.37 KiB | 81.00 KiB/s, done.
Resolving deltas: 100% (34/34), done.
=> Compressing and cleaning up git repository

=> Appending nvm source string to /home/enia/.bashrc
=> Appending bash_completion source string to /home/enia/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

正常終了しました。
ターミナルを閉じて再起動し、wslにログインします。 command -v nvm を実行して、nvmと返ってくることを確認します。

enia:~$> command -v nvm
nvm

NOTE:
私の環境では、ターミナルを再起動させずにコマンドを実行すると何も帰ってきませんでした。

この時点ではnodeはインストールされていませんが、インストールされていないことを確認するために、nvm -lsを実行します。

enia:~$> nvm ls

            N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

node.js、npm をインストールする

いよいよ、node.jsをインストールしていきます。

Microsoftのページには安定板ではなく、最新版と安定板のインストール手順がそれぞれ記載されていますが、ここでは安定板だけをインストールしていきます。
安定板をインストールするにはnvm install --ltsを利用します。ltsはlatestの略です。

enia:~$> nvm install --lts

Installing latest LTS version.
Downloading and installing node v14.17.6...
Downloading https://nodejs.org/dist/v14.17.6/node-v14.17.6-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.17.6 (npm v6.14.15)
Creating default alias: default -> lts/* (-> v14.17.6)

これでnode.jsのインストールは完了です。再度nvm lsを実行します。 なにやら表示されればOKです。バージョンはその時点の安定板のバージョンになっています。

enia:~$> nvm ls

->     v14.17.6
default -> lts/* (-> v14.17.6)
node -> stable (-> v14.17.6) (default)
stable -> 14.17 (-> v14.17.6) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/fermium (-> v14.17.6)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.6 (-> N/A)
lts/fermium -> v14.17.6

nodeコマンドが利用できるようになったことをnode --versionで確認します。 nvm -lsで表示されていたものと同じバージョン名が表示されるはずです。

enia:~$> node --version
v14.17.6

node.jsをインストールするとnode.jsのパッケージマネージャであるnpmも自動的にインストールされます。
npmコマンド利用できるようになったことをnpm --versionで確認します。

enia:~$> npm --version
6.14.15

ここまでで、node.jsのインストール作業は完了です。

(オプション)yarnをinstallする

Yarnとは、主にJavaScriptで開発されたプログラム部品(モジュール)を管理するためのパッケージ管理システムの一つで、npmと互換性があります。

npmに比べ実行速度が高速です。パッケージの導入時に依存先のパッケージのバージョン番号を記録(yarn.lockファイル)するため、環境の再構築や他のコンピュータでの環境構築において正確に同じバージョンのパッケージを導入することができます。npmで許可されていたパッケージ導入時のコード実行が禁止され、パッケージの整合性をチェックサムで検証するなどセキュリティにも配慮しています。

2016年に米SNS大手フェイスブックFacebook)社が自社環境でのパッケージ管理のために開発し、BSDライセンスに基づいてオープンソースソフトウェアとして公開しました。

yarnのインストール手順は下記の公式サイトに記載されています。 classic.yarnpkg.com

公式の手順にしたがって、npm install --global yarnコマンドでインストールします。

enia:~$> npm install --global yarn
6.14.15
> yarn@1.22.11 preinstall /home/enia/.nvm/versions/node/v14.17.6/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

/home/enia/.nvm/versions/node/v14.17.6/bin/yarn -> /home/enia/.nvm/versions/node/v14.17.6/lib/node_modules/yarn/bin/yarn.js
/home/enia/.nvm/versions/node/v14.17.6/bin/yarnpkg -> /home/enia/.nvm/versions/node/v14.17.6/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.11
added 1 package in 1.254s

yarnコマンドが利用可能になっていることをyarn --versionで確認します。

enia:~$> yarn --version
1.22.11

以上でyarnのインストールは完了です。

おわりに

今回はWSL2上でNode.jsを動かす手順を紹介しました。 WSL2上で開発することで、より効率的に開発できるようになります。

今回はここまで!

Windows上でLinuxを動かす(WSL2)

f:id:enia:20210912174705p:plain えにあです。

今回はWindows上でLinux(Ubuntu)を使えるようにしていきます。

NOTE:
下記のWindows公式の記事を参考にしています。
docs.microsoft.com

環境

OS: Windows 10 Home Edition(X64)

1. バージョン確認

wsl2を利用するには、x64 システムの場合:バージョン 1903 以降、ビルド 18362 以上である必要があります。
winverコマンドでバージョンを確認します。
f:id:enia:20210909165348p:plain

バージョン21H1なので問題ありませんでした。 f:id:enia:20210909165514p:plain

2. 管理者権限でPower Shellを起動する

以降のコマンドを実行する際に管理者権限が必要になります。
管理者権限でPower Shellを実行します。
f:id:enia:20210909142945p:plain

3. LinuxWindows サブシステムを有効にする

Windows 上に Linux ディストリビューションをインストールする前に、まず "LinuxWindows サブシステム" オプション機能を有効にする必要があります。

以下のコマンドを管理者権限で起動したPower Shellで実行します。

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

30秒もかからずに正常終了しました。 f:id:enia:20210909165649p:plain

4. 仮想マシンの機能を有効にする

WSL 2 をインストールする前に、"仮想マシン プラットフォーム" オプション機能を有効にする必要があります。 この機能を使用するには、コンピューターに仮想化機能が必要です。

以下のコマンドを管理者権限で起動したPower Shellで実行します。

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

10秒ほどで正常終了しました。 f:id:enia:20210909173333p:plain

5. マシンを再起動する

ここまで完了したらマシンを再起動しましょう 再起動しない場合、次の手順で以下のエラーが発生します。

f:id:enia:20210909173811p:plain

5. Linux カーネル更新プログラム パッケージをダウンロードする

以下のリンクから、最新のLinuxカーネル更新プログラムをダウンロードします。
ファイルサイズ:16.3MB
https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ

ダウンロードが完了したらファイルを実行します。 f:id:enia:20210909174847p:plain

Nextを押して、10秒ほど待つと、管理者権限を求める警告がでますので「はい」を押します。
インストールが始まります。
f:id:enia:20210909174903p:plain

10秒ほどでインストールが完了するのでFinishを押します。
f:id:enia:20210909175051p:plain

6. WSL 2 を既定のバージョンとして設定する

新しい Linux ディストリビューションをインストールする際の既定のバージョンとして WSL 2 を設定します。
手順2と同じ方法で、Power Shellを管理者権限で起動し、以下のコマンドを実行します。

wsl --set-default-version 2

正常終了すると、以下のように表示されるはずです。 f:id:enia:20210909175415p:plain

7. 選択した Linux ディストリビューションをインストールする

https://aka.ms/wslstore Microsoft Store を開き、希望する Linux ディストリビューションを選択します。

以下の画面が表示されます。私はUbuntuを選択します。
f:id:enia:20210909175641p:plain

NOTE:
この手順だと最新バージョン(この時点では20.04)がインストールされます。

インストールを押します。
f:id:enia:20210909175822p:plain

ダウンロードが始まります。 ファイルサイズ: 466.3MB f:id:enia:20210909180212p:plain

インストールが完了したので、Ubuntuを起動します。
f:id:enia:20210909180808p:plain

少し時間がかかると表示されます。 f:id:enia:20210909180852p:plain

私の場合は10秒もかからずに、UserNameの入力画面になりました。 f:id:enia:20210909181117p:plain

ユーザ名を入力するとパスワードの入力に移ります。 f:id:enia:20210909181156p:plain

以下のように表示されれば成功です。
f:id:enia:20210909181346p:plain

ウィンドウを閉じて終了します。

8. Power ShellからLinuxを起動する

Power Shellを起動しなおして、wslコマンドを実行します。 するとLinuxに切り替わるはずです。 f:id:enia:20210909183505p:plain

NOTE:
/mnt/cの下はWindowsファイルシステムの領域なので、/homeの下など、Linuxの領域に保存するほうが望ましいです。

以上でWSL2の環境構築は完了です!

Udemy学習記録 Unity2D脱出ゲーム開発入門(5日目)

えにあです

島津さんのUnity2D脱出ゲーム開発入門をやっていきます。 前回は46までやりましたので、No47~進めていきます。 今回からセクション7: 脱出ゲームテクニック集:アイテムギミック編に入ります。

No.47 はじめに

鍵を手に入れたら宝箱を開けられる、といったギミックを作っていくよ、という話

No.48 はじめに&ギミック(たぬき)の配置

アイテムボックスの配置

  ItemCaseという画像ファイルの名前をItemBoxに変更 Canvasを右クリック -> UI -> Imageでオブジェクトを追加 オブジェクトの名前もItemBoxにする。

ItemBoxのSourceImageに画像ファイルを設定。 SetNativeSizeする。

ItemBoxを画面の一番下に配置する。 f:id:enia:20210902130441p:plain

アイテムボックスは全画面で共通なので、Panel0やらPanel1やらではなく、PanelParentの下に置いてるんだな。

たぬきの配置

Panel1を右クリック -> UI => Image Tanukiに名前を変更

SourceImageにTanuki01を設定。Set Native Size。 Pixels Per Unitを138にするの忘れずに。

穴を隠すようにタヌキを配置する。 f:id:enia:20210902130321p:plain

葉っぱの追加

Panel0を右クリック -> UI -> Image Leafに名前を変更

SourceImageにLeafを設定。Set Native Size。 Pixels Per Unitを138にするの忘れずに。

とやってみったら、動画の葉っぱより全然でかい。 Width140 Height 144に手動で設定するほうが良い。 葉っぱをいい感じの位置に配置する。

f:id:enia:20210902130400p:plain

No.49 ギミック(たぬき)の簡易実装

タヌキをクリックしたときに、Playerが葉っぱを持っていたらタヌキが消えるようにする

簡易スクリプト作成

プロジェクトウィンドウで、Scritpsの下にTanukiを追加。

public class Tanuki : MonoBehaviour
{
    public void OnThis()
    {
        bool hasItem = true;
        if(hasItem) {
            gameObject.SetActive(false);
        }
    }
}

この時点ではhasItemの実装はできていない。

オブジェジェクトの関連付け

TanukiスクリプトをTanukiオブジェクトに関連付ける

Tanukiオブジェクトにボタンコンポーネントを追加

TanukiのOnClick時に、上述のOnThisを呼び出すようにする。

試してみると、確かに葉っぱが消える。

No.50 アイテム(Leaf)の実装

前回まででは葉っぱを持っていなくてもタヌキを押したら消えちゃう。 ここでは葉っぱを取得する処理の簡易実装をしてみる。

葉っぱをクリックしたら非表示にする

プロジェクトウィンドウでScritpsの下にItemスクリプトを追加

public class Item : MonoBehaviour
{
    public void OnThis()
    {
        gameObject.SetActive(false);
    }
}

関連付け

いつもの繰り返し

LeafにItemスクリプトドラッグアンドドロップ LeafにAdd Component -> Button Onlickで上述のOnThisを呼び出す

まだ簡易実装なので、アイテムボックスに移動させないといけない。

No51. アイテムBoxの簡易実装

葉っぱをクリックされたらアイテムボックスに追加されるようにしていく

ItemBoxの下にイメージ作成

ヒエラルキでItemBoxを右クリック => Image Box0に名前を変更。 コピーしてBox0~5を作る。

以下の画像のように、いい感じの位置に配置する。 f:id:enia:20210902140438p:plain

全部手作業での配置なので修正入るとめんどくさそうなやり方ではある。 しかし、一番シンプルな方法。

アイテムを取得したら、このボックスに追加されるようにしていくようだ。

Box0のSourceImageにLeafを設定する

Box0~4のどの位置に、どのアイテムが来るかは固定の様子。 Box0 = Leaf としておくことで、Leafを取得したらBox0をActiveにするだけでよくなる。

 スクリプト作成

ItemBoxスクリプトを作成する ボックスを格納する配列を作る

public class ItemBox : MonoBehaviour
{
    public GameObject[] boxes;
}

関連付け

ItemBoxにItemBoxスクリプトを割り当てる。 BoxesのSizeを5にすると、以下のようにオブジェクトの設定画面が表示される。 f:id:enia:20210902141232p:plain

こんな感じで割り当ててあげればOK f:id:enia:20210902141330p:plain

おわりに

今回はNo51まで終わらせました

Udemy学習記録 Unity2D脱出ゲーム開発入門(4日目)

えにあです。

島津さんUnity2D脱出ゲーム開発入門をやっていきます。 前回は41 までやりましたので、No42~進めていきます。

No42. 戻るボタンの実装

ロッカー画面、バケツ画面まで進んだ後に、下矢印ボタンを押したら元の画面に戻るようにします。

変数の追加

現在選択されているパネルを見て、戻り先を分岐させる必要がある。 まず、パネルをenumで表現する

    enum Panel
    {
        Panel0,        Panel1,        Panel2,        Panel3
    }

次に、現在選択されているパネルを格納するための変数を用意する

    // 現在表示されているパネル
    Panel currentPanel;

OnBackArrowの実装

    public void OnBackArrow() {
        switch(currentPanel)
        {
            case Panel.Panel2:
                transform.localPosition = new Vector2(0, 0);
                break;
            case Panel.Panel3:
                transform.localPosition = new Vector2(-1000, 0);
                break;
        }
    }

OnBackArrowの関連付け

BackArrowのOnClickにOnBackArrowを関連付ける。

いつものごとく、PanelParentオブジェクトの、PanelChangeスクリプトの、OnBackArrowファンクションという紐づけ方。

currentPanelの初期値も設定していないし、選択時に更新もしていないのでこのままでは動かないだろう。この後修正されるはず。

バグ修正

以下の感じで、矢印が押されるたびにPanelを更新していく。 これで動くはず。 初期値がnullなのが微妙だが、まぁ動く。

    public void OnRightArrow()
    {
        currentPanel = Panel.Panel1;
        transform.localPosition = new Vector2(-1000, 0);
    }


    public void OnLeftArrow(){
        currentPanel = Panel.Panel0;
        transform.localPosition = new Vector2(0, 0);

    }

    public void OnLocker0()
    {
        currentPanel = Panel.Panel2;
        transform.localPosition = new Vector2(0, 1500);
    }

    public void OnBucket()
    {
        currentPanel = Panel.Panel3;
        transform.localPosition = new Vector2(-1000, 1500);
    }

No43. 矢印の表示非表示

初期画面ではこれ以上左にいけないので、左ボタンを出さないといった制御を行う。

Arrow用の変数定義と割り当て

以下のように、Arrowの状態を格納するための変数を定義する。 これらに対してsetActive(true/false)することで、表示状態を変えられる。

    public GameObject rightArrow;
    public GameObject leftArrow;
    public GameObject backArrow;

publicにすることで、Unityエディタから見えるようになる。 こんな感じでインスタンスを割り当てる。 f:id:enia:20210831220121p:plain

矢印が押されるごとに状態の変更

右矢印が押されたら、一度全部の矢印を非表示にして、左矢印だけを表示する。 同じようにすべて関数を更新していく。

明らかに冗長なコードである。どこかで直すのであろう。

    public void OnRightArrow()
    {
        currentPanel = Panel.Panel1;
        transform.localPosition = new Vector2(-1000, 0);

        rightArrow.SetActive(false);
        leftArrow.SetActive(false);
        backArrow.SetActive(false);
        leftArrow.SetActive(true);
    }

初期表示のバグを直す

今までの修正では、矢印を押したタイミングで表示非表示を切り替えているので、 初期表示では矢印が3つ表示されてしまっている。

Start関数の中で表示を切り替えることで、初期表示を修正できる。

    private void Start()
    {
        currentPanel = Panel.Panel0;
        rightArrow.SetActive(false);
        leftArrow.SetActive(false);
        backArrow.SetActive(false);
        rightArrow.SetActive(true);
    }

No.44 矢印の修正

毎回同じロジックを書いているところを修正していく。

HideArrowsの作成

先ほどのコードで、一度すべての矢印を表示にする処理がかなり冗長だったので、以下の関数を新たに作って呼び出すように変更していく。

    void HideArrows()
    {
        rightArrow.SetActive(false);
        leftArrow.SetActive(false);
        backArrow.SetActive(false);
    }

No.45 画面移動の修正

まだまだソースが冗長なので直していきます。

ソースの共通化

指定されたパネルを表示する処理を一か所に寄せます。

 void ShowPanel(Panel panel)
    {
        switch(panel)
        {
            case Panel.Panel0: 
                currentPanel = Panel.Panel0;
                transform.localPosition = new Vector2(0, 0);
                HideArrows();
                rightArrow.SetActive(true);
                break;
            case Panel.Panel1: 
                 currentPanel = Panel.Panel1;
                transform.localPosition = new Vector2(-1000, 0);
                HideArrows();
                leftArrow.SetActive(true);
                break;
            case Panel.Panel2: 
                currentPanel = Panel.Panel2;
                transform.localPosition = new Vector2(0, 1500);
                HideArrows();
                backArrow.SetActive(true);
                break;
            case Panel.Panel3: 
                currentPanel = Panel.Panel3;
                transform.localPosition = new Vector2(-1000, 1500);
                HideArrows();
                backArrow.SetActive(true);
                break;
        }
    }

こうすると、左矢印を押された時の処理は以下のようになります。 他の矢印が押された場合も同様です。

   public void OnLeftArrow(){
        ShowPanel(Panel.Panel0);
    }

さらなる共通化

HideArrowsはすべてで共通なのでメソッドの一番上に持ってくる。 currentパネルの設定は、引数で渡された値を使う。

こんな感じになる。

    void ShowPanel(Panel panel)
    {
        HideArrows();
        currentPanel = panel;
        switch(panel)
        {
            case Panel.Panel0: 
                transform.localPosition = new Vector2(0, 0);
                rightArrow.SetActive(true);
                break;
            case Panel.Panel1:
                transform.localPosition = new Vector2(-1000, 0);
                HideArrows();
                leftArrow.SetActive(true);
                break;
            case Panel.Panel2: 
                transform.localPosition = new Vector2(0, 1500);
                HideArrows();
                backArrow.SetActive(true);
                break;
            case Panel.Panel3: 
                transform.localPosition = new Vector2(-1000, 1500);
                backArrow.SetActive(true);
                break;
        }
    }

No46 おわりに

ここは特になし

まとめ

今回でNo46まで終了しました。 セクション6終了です。 次回はセクション7 No47~進めていきます

Udemy学習記録 Unity2D脱出ゲーム開発入門(3日目)

えにあです。

前回はセクション6 No40までやったので、今日は41をやります。

やること

ロッカーをクリックしたらロッカーがに移動する バケツをクリックしたらバケツ画面に遷移する 戻るを押したら元の画面に戻る

ロッカーとバケツの配置

Panel0を選択して右クリック、UI => Image 名前をLockerに変更

SourceImageにロッカー画像を設定する サイズがおかしいのでSet nativeSizeを押す

いい感じの位置に配置する

バケツも同様に配置する

ボタン機能を付ける

ロッカーを押したとき、バケツを押したときにそれぞれ移動したいので、 各画像にボタン機能を付ける。

インスペクターでAdd Componentでボタンを選択すればボタン機能を追加できる。

ロッカー、バケツクリック時のスクリプト作成

前回作成したパネルチェンジャーに以下を追加

    public void OnLocker0()
    {
        transform.localPosition = new Vector2(0, 1500);
    }

    public void OnBucket()
    {
        transform.localPosition = new Vector2(-1000, 1500);
    }

Locker0とBuckerのボタンに、OnClickを追加してあげる。 PanelChangerはPanelParentにアタッチされてるので、OnClickにはPanelParentのOnLocker0という形で設定する。