@akasa2551

これは、個人的な備忘録です。

VScodeでGit Hubの使い方を教わったので忘れないうちに記します。

プロジェクトの作成

①　Git Hub 左上の［+］をクリックして、［New Repository］でリポジトリを作成します。

②　［Repository name］にプロジェクト名を入れます。

③　［Add a README file］に☑を入れます。

④　［Create repository］ボタンをクリックします。

これでREADMEが入った空のプロジェクトが作成されます。

Git Hub へのアップロード

コードを入れます。

①　［Add file］をクリックして、［Upload files］でアップロードページを開きます。

②　［Drag additional files here to add them to your repository］にソースファイルをドラッグします。

③　コミット名とコメントを入れます。

④　［Commit changes］ボタンをクリックします。

VScodeでのGit Hubへの更新

下記のプロジェクトを更新します。

①　VScodeでソースコードを開きます。

　　※ 画面はソース管理のタブを見ます。

②　更新テスト用テキストを追加します。

　　左上のコミット下に変更が表示されます。

③　Addします。

　　ターミナルに［git add <file名>］を入力し［Enter］を押します。

　　※  file名が ［ index.html ］のため、今回は git add  index.html

　　※ 複数人で行う場合、Addした後に pull します。

④　メッセージにコメントを入れます。

⑤　［コミット］ボタンをクリックします。

⑥　push します。

　　ターミナルに［git push <ブランチ先>  ］ を入力し［Enter］を押します。

　　※  ブランチ先が ［ origin main ］のため、今回は git push origin main

Godotで作成したゲームをアツマールに投稿するのにとても苦労したので、まとめます。

情報提供していただいた方ありがとうございます。本当に助かりました。

エクスポートテンプレートのインストール

エディタ＞エクスポートテンプレートの管理　：エクスポートテンプレートをインストールします。私は、3.3.2.stable.monoをインストールしました。

プロジェクトのエクスポート

プロジェクト＞エクスポート　：エクスポート画面を開きます。

エクスポート＞追加＞HTML５　：ブラウザ版を追加します。

Canvas Resize Policy　：[Adaptive]にします。

[プロジェクトのエクスポート]を押します。

ファイル名を[index.html]にして、[保存]を押します。

このとき空のフォルダを保存先に指定することをお勧めします。

Godot 慣れてきたので、忘れないうちに備忘録として残します。まずは本当に基礎の基礎部分なので、見ても知ってるわとしかならない気がする。

使ってるVerは3.0です。

画面サイズの設定方法

プロジェクト＞プロジェクト設定

Display＞Window＞Size　：[Wedth]に横幅、[Height]に縦幅を指定する。

画面に対して部品の大きさなどが合わない場合は下記の設定を行う。

Display＞Window＞ Handheld＞Orientation　：[portrait]に設定する。

Display＞Window＞ Stretch＞Mode　：[viewport]に設定する。

Display＞Window＞ Stretch＞Aspect　：[keep]に設定する。

追従カメラの作成

私は画面移動をカメラで行ったため、[Main]シーンの子ノードに[Position2D]を設置、さらに[Camera]を子ノードで追加しました。

他にもシーンで作って呼び出す方法とかあるんですけど、別のシーンに変数渡したり考えるのがだるかったんで１つのシーンにすべてやらせるこの方法で実装しました。

[Position2D]を左上に合わせる

[GameCamera]の位置を左上に設定、追従させたいので、[Current]と[Rotating]をONにします。

あとは[Main]シーンにスクリプトをアタッチして、スクリプト内で移動してあげるだけです。

ゲーム内設定からゲームサイズを指定することもできそうだけど、ここではよくわかんなかったので手打ちしました。

画面移動の際は元の位置に画面サイズ分を追加して移動させてます。

戻すときは引くだけです。

画面の背景

画面の背景は[ColorRect]使ってます。

てきとーに全体を囲んで、一番先頭、Position2DとCameraの下辺りに…

Godotは上から順に表示されるので、背景より上にボタンなどがあると表示されません。

そして、勝手に動かしたくもないので普段はロックしてます。

とりあえず基礎の基礎ってことでここまで。

今回はWebタイプの電子記録ツールである【ScrapBox】を紹介します。

ScrapBoxはWeb型電子記録ツールです。 メモをタグで紐付けて自分独自の辞書のように残すことができるのが特徴です。

あ～あのメモどこだっけ？これって確かあの機能が使われてたはずだけど…みたいなのがぱっと探せてしまう！

ScrapBox URL：https://scrapbox.io/ 参考URL：https://scrapbox.io/help-jp/Scrapboxの使い方

ScrapBoxの始め方

ScrapBoxの始め方を説明します。

①https://scrapbox.io/に進むと下記のページが出てくると思います。

②トップページのいますぐお試しを押して、Googleアカウントでログインします。

※ScrapBoxの利用にはGoogleアカウントが必須です。

③下記のように名前を設定して、[Looks good]を押します。

これで自分のプライベートページが完成です。

プロジェクトページ作成方法

プライベートページだけでも機能は楽しめるんですが、分野ごとにメモを分けたい方のために ScrapBox では、プロジェクトページを作成することができます。

この プロジェクトページ を作成するときの設定がわかりにくいかなと感じたので説明します。

① ScrapBoxアイコンを押すと、メニューが出てきます。

②メニューの2番目の[Create new project ＋]を押します。

③プロジェクトの名前を[Project Name]に英数字で入力します。

※ すでに使われている名前は使用できません。

④公開する場合は [Public Project]を選択、非公開で個人や仲間内だけで使いたい場合は、 [Private Project]を選択します。

[Private Project]を選択した場合は、目的を選びます。

[Business]は企業向けの営利目的で使用する場合、[Personal]は個人などで使用する場合です。

[Personal]は無料ですし、企業でビジネス絡みで使用するとかでない限り [Personal]選んでおけば問題ないです。

これで完成です。

ScrapBoxの使い方

では、簡単に ScrapBoxの使い方を説明します。

＋マークを押すと、メモを追加できます。

最初の行はタイトル、同じタイトルのメモは作成できません。

次の行からが内容です。改行で内容を書き始めます。

基本的な使用方法は最初にScrapBoxの中にメモとして入ってます。

リンク化やハッシュタグは便利なのでうまく使い分けてください。

この内容を書いてもつまらないので、ここからはこのページに載ってなくて私がこの機能いい！って思ったやつを紹介します。

コードが書ける！

code:〇〇.△△でコードが書けます。

〇〇にはタイトルを…、△△にはプログラム言語の拡張子を入れることで、コードが書けます。

言語によって色分けをしてくれるのですごく便利！

テーブルが置ける！

table:〇〇でテーブル（表）が置けます。〇〇にはタイトルを入力します。

Tabキーで列を追加、Enterキーで行を追加です。

数式が書ける！

[$ 数式 ]で数式が書けます。数式にはTaXの記法で数式を書きます。

[$ \frac{-b \pm \sqrt{b^2-4ac}}{2a} ]と書くと…

のような数式が書けます。

数式内に[]を使う場合は必ず[$ [x-3]+a^2 ]のように[]閉じる前に半角スペースを入れてください。

他にも画像や動画の埋め込みなどもできます。

拡張機能もあり、活用方法は無限大です。

今回はRPGツクールMVのマップチップの作成方法を紹介します。

実はこれ、前にゲーム制作垢のPixivFANBOXで取り扱った内容なんですけど、PixivIDないと見れないんだけど！って声が一部身内からあったため、どうせならとここに記載しておきます。

これは自分が調べた中で一番作りやすい方法ってだけですので、原理を理解するのに役立てたらなー程度のまとめです。下記のサイトが詳しくまとめてるのでこちらを見た方が早いかも…。

http://dotkobo.web.fc2.com/page1_top.html

ざっくり言ってしまいますと、RPGツクールMVのオートタイルは24×24のブロックでできています。この図は、それがわかるように1ドットあけてあり、自分はこの図に当てはめて絵を描いて最後にこの1ドットの隙間を詰めるといった作業で描いています。実際に使うのは左の4×6ブロックのみです。

まず、上記のようにABCDの部分に壁の四つ角にあたるところを描きます。今回は壁にしたかったので奥を狭く、手前を広くしてあります。

そして、その下にある4×4の配列の四隅に先程描いたABCDのブロックを配置します。あとはそれをつなぎ合わせて、Mのところに天井を描けば完成です。

こんな感じ。

次にそれを右の図に、先程描いたIJKLを配置します。するとEFGHが自然と描けるように…。ここも先程と同じようにつなぎ合わせて描いてください。

こんな感じ。最後は今描いたEFGHを左のEFGHに配置するだけ。

これであとは左の4×6のブロックだけ切り取り、あけた１ドットの隙間を詰めれば完成！

tilesetsのA2などに貼ってご使用ください。これだけだと無機質なので、tilesetsのBに草などを描いて（※1）ツクール上で描いた壁の上に置いていくとちょっとそれっぽい感じになります。

※１ 描き方は先程のABCDの部分（48×48）の上からレイヤ―で、壁の方向ごとに草などを描いて、それをtilesetsのBに張り付けるだけです。

ツクール画面上

実際にローグライクのゲームに組み込んだ時

Unityのマップの作成方法にていろいろとイライラしたので今後のためにも記録を残しておきます。

私は日本語設定にしているので英語設定の方は雰囲気で感じ取ってください。

Unity Version : 2020.3.6f1

1．TileMapの作成

①ゲームオブジェクト＞２Dオブジェクト＞タイルマップ＞ 【 短形 】 を選択

　ヒエラルキーはこんな感じ

②ここでタイルの 【 セルサイズ 】 を決定する

　これで1マス24×24のグリッド設定が完了（ツクールのオートタイルは24×24のため）

2．マップチップの作成

①使いたいMapチップをUnityに保存して選択

②【 インスペクター 】 の 【 スプライトモード 】 を 【 複数 】 に設定

　※これを忘れると画像をスライス（切る）ことができない

③【ユニット毎  のピクセル数 】 を 【 １ 】 に設定

　※ピクセルの数を変に変更してしまうとさっきセルサイズを変えたことが無駄になる

④【 フィルタモード 】 を 【 ポイント(フィルターなし) 】 に設定

　※これを忘れると横のタイルの色の影響を受ける

⑤【 Sprite Editor 】 を開く

⑥ 【 スライス 】 を選択

⑦分割の設定を行う

　・ 【 Grid By Cell Count 】 を選択し、2×3で区切る

　・ 【 Grid By Cell Size 】 を選択し、32×32のブロックごとに区切る

⑧適用

⑨  【 ウィンドウ 】 から 【 タイルパレット 】 を開く

⑩【 タイルパレット 】 に追加

3．マップを背景に設定

①右上の 【 レイヤー 】 を選択

② レイヤー を編集＞インスペクター＞【ソートレイヤー】に新規でレイヤーを追加

③タイルマップ＞インスペクター＞Tilemap Renderer＞追加設定＞【ソートレイヤー】に追加したレイヤーを設定

　すると、プレイヤーの後ろにマップが表示されるようになる

まだまだ未熟だからこそ教えられることもあるはず！真っ白な状態からプログラマになった私がレベルごとにお勧めのオンライン教材を紹介します。

レベル１ progate

がちの初心者はまずprogateをやってみることをおすすめします。

今まで学ぼうと思ってたけど難しくて断念した、そんな苦い記憶から抜け出してくれます。

実際にコードを書きながらお題をクリアして基礎を固めるといったタイプのオンライン教材で、ゲームみたいな感覚で楽しめます。

アプリをプレイして流れが掴めたらパソコン版をやるのがおすすめ。ただ、progateをやってもcodeは書けません。

こういうcodeでこういうことするよっていうのがわかるだけ。入口に過ぎません。

有料版もやりましたが、ボリューム少ないのでさくっと一周してメモして解約でOKでしょう。有料プランは(月額980円)　

もう少しボリュームがほしいし、継続して周回するのはあまり意味ないなと。扱ってる言語がフロントエンド向けなので少ないのもあります。

中身は大体全部一緒なので好きな言語に絞ってそこだけやる方が個人的にはいいのかなと。私は全部やっちゃいましたけど、それでもそこまで時間はかからなかったです。

レベル2 ドットインストール

動画を見ながら学ぶタイプの教材です。

環境構築から丁寧に教えてくれるので、より実装に近い感覚です。

ただ、動画を追うのに必死になって結局お兄さんのいうがまま作った感じになってしまって、スキルアップを図るといった面では私には弱く感じました。

基礎を学ぶだけなら無料でも十分ですが、何か作りたい、応用をというのであれば有料プランを登録することをおすすめします。(有料プランは月額1080円)

レベル3 paizaラーニング

paizaもprogate同様、出題形式のオンライン教材です。progateと違うところは動画で説明してくれるところと問題量の豊富さ、ゲーム感覚でプログラムが学べるツールがあったりとにかくボリュームがあります！

あと扱ってる言語が多いのも魅力的ですね。

正直paizaだけで十分なんじゃと錯覚するほど…。ただ標準入力でつまずくとスキルアップのテストも合格できないため、ただ苦痛になるのでそこが難点かなと。

無料でも十分学べますし有料プランも月額600円からとお得ですが、最初に有料に入ってもあまり意味はないかと。無料会員でも受けれる講座数は結構あるので。無料会員でまずは楽しんで、有料はそれから考えるでいいとおもいます。

ただこれも何か作るといった意味ではまたちょっと違うかな。

最後に

なんでもいいから何か作るんだというならドットインストールか、YouTubeの動画で環境構築から作成まで開発しているのが良いです。

C#ならUnity、JavaScriptならVScodeで十分でしょうし、Visual Studioの.NETとかなら大体の言語いけたはずですし、今度はそこら辺の記事まとめようかなぁ。

最近、progateだけやればいいとかprogateは意味ないとかいろんな意見が飛び交ってるので私なりにまとめてみました。

JavaScriptではデバックはブラウザ環境で行うことが一般的です。

ここではVisual Studio codeでのJavaScriptのテスト環境の作り方を紹介します。(あくまでこれは私が知ってる一部のやり方なのでもっといいやり方はあるかも…。)

まず、 Visual Studio codeでプラグインマネージャーを開きます。

①Debugger for Chrome を検索してインストールします。

②次に Live Server を検索してインストールします。

この後、必ず Visual Studio code を再起動してください。

再起動しないとプラグインが機能しません。

③下記のindex.htmlを作成（HTMLコードは参考に記載しておきます。）　

④下記のmain.jsを作成

function run(){ }の中にテストコードを記載してください。

⑤右下のGo Liveを押す

これでテスト環境完成。[Run]ボタンを押すと④で書いたコードの処理が実行されます。

chromeやedgeではF12、operaではCtrl＋Shift＋Iで開発ツールを呼び出せます。

最後に

今回紹介したやり方はローカルホストでブラウザを使用して確認するやり方でHTMLとJavaScript専用のやり方になります。

JavaScriptは、無償でブラウザ環境でデバックを行えるサービスもあるので、参考までに。

いざ現場に入ると、コードエディタやテキストエディタなんて好きなもの使ったらいいよと野に放たれ、とりあえず適当なものをいれて書くことになります。

そして、後から他の人の画面見て自分が結構無駄なことをやっていた、最初からそれ使っていれば！なんてことも多々あります。

ここでは各エディタの便利な機能に焦点をあてて、私が使用しているエディタを紹介したいと思います

紹介するエディタ

・Visual Studio Code

・サクラエディタ

・Brackets

Visual Studio Code

https://azure.microsoft.com/ja-jp/products/visual-studio-code/:title

Microsoftが提供する無料のソースコードエディタです。正直これだけでいいんじゃないかってくらい大抵のことはできます。

検索、置換、コードを折り畳む機能などコードを書く上で必要な機能はプラグイン導入せずとも一通り揃っており、ファイル名を使う言語に合わせた拡張子にすることでコード補完やコード予測、そのコードに合わせた改行を行ってくれます。

また、プラグインライブラリも充実しており、日本語化を始め、JavaScriptテスト環境の作成から、フローチャートやPlantUMLの作成など設計まで行えます。

※具体的な実装方法などのは別に投稿します。

プログラム初心者にとって一番重宝するエディタかもしれません。

サクラエディタ

https://sakura-editor.github.io/:title

サクラエディタはWindows上で動作する無料のテキストエディタです。残念ながらMacには対応していません。

とてもシンプルなエディタでわかりやすく、HTMLの作成にも使用できます。テキスト入力をより早くおこなうために支援する機能や、処理の自動化をおこなう機能などもあります。

私は文字コードの変換によく使用しています。さまざまな文字コードに対応しており、CSVファイルの文字コードを変換したいといったときなどにすごく重宝します。

シンプルかつ多機能であるため、入れておいて損はないテキストエディタです。

Brackets

https://brackets.softonic.jp/:title

Adobeが提供する無料のソースコードエディタ(オープンソース)です。

自分好みのエディタに変えられることが特徴でフォントやテーマを変更して見やすくおしゃれにカスタマイズできます。

Bracketsは他のテキストエディタと違い、最初から日本語設定にできます。

変更箇所をすぐにブラウザで確認できる機能やコードを折り畳める機能など便利な機能が備わってます。

HTMLで画面書くときなんかはVScodeよりこっちの方がいいかもしれません。カラーピッカーも使えるので！

最後に

他にも良いエディタはたくさんあると思いますが、あれこれやろうとするとお金がかかる有償になるので、私的にはこの３つをうまく使う感じで補ってます。

手軽でもっといいエディタあるよ、こんな機能も使えるよみたいなのがあったら教えてください。

好きなものは鳥と機械です。