Kilimanjaro Warehouse

WEBとかゲーム開発のことについて書きます。

VS Code: マークダウン記法で書かれたファイルをプレビューしながら編集する

VS Code (Visual Studio Code - Code Editing. Redefined) は、
マークダウン記法で書かれたファイルのパース結果を、
リアルタイムで確認することができます。

f:id:kilimanjaro-a2:20190714120445p:plain

カラムを生の.mdファイルとプレビューの2つに分割することで、
常に見た目を確認しながらファイルを編集することができます。

f:id:kilimanjaro-a2:20190714120314p:plain
(左: 編集中のファイル, 右: パースされた結果)


以下手順です。

.mdファイルを開く

VS Codeで拡張子.mdのファイルを開きます
f:id:kilimanjaro-a2:20190714120223p:plain

.mdファイルのタブを右クリック→(上下左右)へ分割

エディタ分割機能で、好きな方向へ分割します
f:id:kilimanjaro-a2:20190714120245p:plain

.mdファイルのタブを右クリック→プレビューを開く

プレビューを表示したい場所のタブから、プレビューを開きます
f:id:kilimanjaro-a2:20190714120301p:plain

完成!

編集したファイルはすぐにプレビューに反映されます
f:id:kilimanjaro-a2:20190714120314p:plain

(記事中の.mdファイルは
A template to make good README.md · GitHub
を使用しています)

VS Code: C# (非Unity) のコード補完を行う

VSCodeC#を書くときに、コード補完を有効にするための手順のメモです。
macOSでしか試していませんが、多分他のOSでも同じだと思います。

手順1: 必要なもののインストール

Visual Studio Code - Code Editing. Redefined

f:id:kilimanjaro-a2:20190707171226p:plain

  • .NET Coreのインストール

Download .NET Core 2.2 (Linux, macOS, and Windows)

手順2: プロジェクトファイルを生成する

C#ファイルを置きたいディレクトリへ移動し、
以下のコマンドを実行します。

dotnet new console

C#のプロジェクトにはプロジェクトファイル(.csproj)が必要なため、
それを生成するためのコマンドのようです。
(.csprojを作らず、.csファイルを置いてもコードを補完してくれない)

参考:
teratail.com

その後、File -> Openでこのディレクトリを開くことで、
そのディレクトリ以下に作られた.csファイルにはコードの補完が効くようになります。

#unity1week に参加した ~あつめる編~

unityroom主催のUnity 1週間ゲームジャムに参加しました。
今回は第12回目の開催で、お題は「あつめる」でした。

https://unityroom.com/unity1weeks/13

作ったゲームについて

シンプルに規定の数のアイテムをあつめるゲームにしました。

"ラーメンの上に浮いている油をあつめる",
"定年退職までに2000万円あつめる"

などのくだらないアイディアも思いつきましたが、
ゲームとして成り立たせるのが難しかったため、
採用を見送りました。


作ったのは、ボールを弾いて星をあつめるゲームです。

f:id:kilimanjaro-a2:20190707175132p:plain
https://unityroom.com/games/c-o-llect

角度を考えて弾いて、星を規定の数集めるとステージクリアです。
6ステージあります。
早ければ3分くらいで終わります。

良かった点

今回、良かった点は「完成させたこと」でした。
ギリギリまでゲームの内容が思い浮かばず、
前回のように参加を見送ろうかと思いましたが、
諦めなかったのが良かったです。

反省点

  • 実装の時間が足りなかった

実装に取りかかるまでの時間が長すぎて、時間が足りませんでした。

  • 根本のゲームのアイディアがあまり練られてなかった

単純に面白みがどこにあるのかわからないものを作ってしまいました。
当初の予定では「適当にボールを弾いてるだけで、星がチャリンチャリンと集まってすごい気持ちいい!」
的なゲームを作る予定でしたが、いざ実装してみると全然面白くなかったです。

  • UIやUX的な部分に力を入れなかった

いつもは、ゲームの手触りやマイクロインタラクションなどに力を入れていたのですが、
今回は思うところあって、その辺を一切手をつけずにやってみましたが、
よくない判断でした。
(時間が足りなかったというのもあります。)

思ったこと

参加して、投稿するだけで、えらいと思います。
次回は早めにアイディアを決めて、すぐ実装に取り掛かるか、
誰かと組んで作業を分担するなどの対策を考えたいと思います。

npm install -gでfirebase-toolsのインストールができないとき

Firebaseを利用するために、

npm install -g firebase-tools

でfirebase-toolsをインストールしようと思ったのですが、

gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/firebase-tools/node_modules/fsevents/.node-gyp'
gyp ERR! System Darwin 18.6.0
...(以下略)...

このようなエラーが発生し、インストールに失敗しました。
権限の設定やキャッシュの削除などを試してみたのですが、うまくいかず...

調べてみると、「npmではなくyarnでインストールすると良い」
との情報があったので試してみました。

yarn global add firebase-tools
success Installed "firebase-tools@7.0.1" with binaries:
      - firebase

すると、難なく成功しました。

Thanks
github.com

ShaderLab: Properties内でテクスチャを宣言する際には波括弧が必要

この前シェーダーを書いていたところ、

Shader error in 'TestShader': Parse error: syntax error, unexpected TVAL_ID at line 7

というエラーが出ました。

原因を調べてみたところ、
Properties内でテクスチャのプロパティを宣言する際に、
末尾に波括弧{}をつけ忘れていたのが原因のようでした。


公式ドキュメントにもある通り、
2D, Cube, 3Dなどでテクスチャを使用する際は、
末尾に{}を追加する必要があるようです。

name ("display name", 2D) = "defaulttexture" {}
name ("display name", Cube) = "defaulttexture" {}
name ("display name", 3D) = "defaulttexture" {}

docs.unity3d.com

Unityのバージョンが5になるまでは、
波括弧の中にオプションを書くことができたようですが、
現在は削除されたようです。

つまり現在では波括弧の中にオプションが書かれることはなく、
意味のない記述ではあるものの、
書かない場合エラーが発生してしまうという状況になっています。

(しかし、Propertiesの中身がテクスチャ(2D, Cube, 3D)の宣言1行のみの場合、
エラーが発生せず問題なくコンパイルが通るため、謎です)

この件について詳しい情報をお持ちの方がいたら、
ブログのコメント欄かTwitterでリプライを頂きたいです...

Blender: テクスチャがぼやけるときの対処法

Blenderでドット絵のようなテクスチャを使用する場合、
デフォルトの設定だと画像がぼやけて表示されます。
f:id:kilimanjaro-a2:20190622081527p:plain


これを解決するには、User Preferencesを開き、
Systemタブから、OpenGLのMipmapsのチェックを外します。
f:id:kilimanjaro-a2:20190622081530p:plain
f:id:kilimanjaro-a2:20191013020259p:plain
f:id:kilimanjaro-a2:20191013020422p:plain

これにより補完が効かなくなり、
テクスチャがくっきりと表示されるようになります。
f:id:kilimanjaro-a2:20190622081542p:plain

テクスチャはユニティちゃん 2Dデータのものを使用しております。
© Unity Technologies Japan/UCL

VS Code: 個人的に使用頻度の高いショートカット

Visual Studio Codeのショートカットについては、既にたくさんの記事がありますが、
よく使うものだけに絞ってまとめてみました。

必須レベル

Windows macOS 操作
Ctrl+C ⌘C コピー
Ctrl+X ⌘X 切り取り
Ctrl+P ⌘P 貼り付け
Ctrl+F ⌘F ファイル内検索
Ctrl+Shift+F ⇧⌘F 全ファイルから検索
Ctrl+S ⌘S 保存
Ctrl+P ⌘P ファイル名検索
Ctrl+/ ⌘/ コメントアウトとアンコメントのトグル

よく使う

Windows macOS 操作
Ctrl+H ⌥⌘F ファイル内置換
Ctrl+N ⌘N 新しいタブを開く
Ctrl+W ⌘W 開いているタブを閉じる
Ctrl+Shift+T ⇧⌘T 直前に閉じたタブを開く
Alt+↑/↓ ⌥↑/↓ 行を入れ替え
Ctrl+Shift+K ⇧⌘K 行を削除
Ctrl+Enter ⌘Enter 下へ改行を挿入
Ctrl+Shift+Enter ⇧⌘Enter 上へ改行を挿入

たまに使う

Windows macOS 操作
Ctrl+←/→ ⌘←/→ 行の最初/最後へ移動
Ctrl+↑/↓ ⌘↑/↓ ファイルの最初/最後へ移動
Ctrl+Alt+↑/↓ ⌥⌘↑/↓ カーソルを追加(escで解除)
Ctrl+Shift+L ⇧⌘L 同じ単語を全て選択(escで解除)
Ctrl+K Enter ⌘K Enter プレビューモードのタブを開き続けるようにする
Ctrl+Shift+P ⇧⌘P コマンドパレットを開く

補足

macOSの記号の意味は以下の通りです。
Command(⌘)
Shift(⇧)
Option(⌥)
Control(⌃)

全ショートカット一覧:
windows
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
macOS
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf