Siv3Dを（ほぼ）初めて触ってみる

# 背景
- 組み込みはやるが、C++オンリーでの開発はやったことない　コワイ
- 知り合いがSiv3Dを使っていてやってみたくなった
- 自分一人でできるかな、な状態だが着せ替えゲームを作りたい

# 開発環境
- Windows11
- Visual Studio 2022（C++開発環境）
- Siv3D ダウンロード済み

https://siv3d.github.io/ja-jp/download/windows/

# 1. はじめての Siv3Dの実行
プロジェクトを作成すると最初からサンプルが入っているので実行してみます

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/49e3e85c-1303-efce-ef30-3ad64d839fa4.png" width="500">

https://siv3d.github.io/ja-jp/tutorial/hello/

1.2 サンプルの改造を見ると、8つの+ボタンを押すと改造チュートリアルがあるのでやってみます
ただチュートリアルに従うだけではなく色々いじったり、他の手段があるかも調べてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/26cb85e2-050f-7140-6078-62f6a5d30ea7.png)

## 背景の色を変えてみる
サンプルは RGBの値を0.0～1.0 で変更していました
普段絵を描くときは256段階で色を扱っているので、分数で書いてみます

	Scene::SetBackground(ColorF{ 255.0/255.0, 207.0 / 255.0, 221.0 / 255.0 });

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/bbfdb67e-9eeb-4c19-502b-ecf214d79cd8.png" width="500">

できた　かわいい

知り合いに聞いたところ、ColorFではなくColorを使えば256段階で扱えるとのことでした

	Scene::SetBackground(Color{ 255, 207, 221 });

[7. 背景の色を変える](https://siv3d.github.io/ja-jp/tutorial/background/)にも確かにやり方が載っています。Palette::Black、といったパレットを使う方法もありました。HTMLカラーの色名を使えるみたいです。

## 絵文字を変えてみる
Siv3Dでは絵文字からテクスチャを作れるそうです。
テクスチャってなんだ？とりあえず変えてみます。
知り合い曰くラスタライズのようなものらしい。絵文字や文字を画像化して扱う感じですね。

	const Texture emoji{ U"🌟"_emoji };
お気に入りの絵文字を入れてみたところ、エラーがでてダメでした。
 [Windows] + [.] で出てくる絵文字を入れればよいようです。
 [25. テクスチャを描く](https://siv3d.github.io/ja-jp/tutorial2/texture/)によれば[Emojipedia](https://emojipedia.org/)で探せるとのこと。

	const Texture emoji{ U"🐏"_emoji };

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/9777a02a-cf1a-90a4-850f-0bdbbb86b8d9.png" width="500">

できました！もともとは下のような絵文字だったのに不思議です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/9bd9f9f8-ea21-4abd-108e-73a58e2f6bd1.png" width="200">


いっぱい羊を並べてみたかったですが、これではうまくいかなさそうです。

	const Texture emoji{ U"🐏🐏"_emoji };


一番下のプレイヤー描画部分をいじるとできました。

		// プレイヤーを描く | Draw the player
		for (int i = 0; i < 5; i++) {
			emoji.scaled(0.75).mirrored(isPlayerFacingRight).drawAt(playerPosX+i*75, 540);
		}


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/21e8b73c-d7ea-f310-f845-a1ab880c5bd9.png" width="500">

 ## テクスチャの位置を変える
 風車の画像の位置を変えてみます。
 
	texture.draw(0, 0);

大きいので、[こちら](https://zenn.dev/reputeless/books/siv3d-documentation/viewer/tutorial-texture)を参考にサイズも変えてみます。

		texture.scaled(0.8).draw(50, 50);

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/d0a2ade6-d0e4-4bae-6958-e7baa0c35549.png" width="500">

 ## テキストを変える
内容を変えて文字の位置も変えてみました。
 
 		font(U"I'm so Happy🎶🎶🎶").draw(50, Vec2{ 20, 320 }, ColorF{ 0.2, 0.4, 0.8 });

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/0a788d52-96de-71b0-a83d-bacd9f763be5.png" width="500">


## マウスカーソルに追従する半透明の円を変えてみる
せっかくなので背景色も変えて、懐中電灯で探索風にしてみました。
照らすと説明文が読めます。

		Circle{ Cursor::Pos(), 100 }.draw(Color{ 255 , 225 , 187, 70 });

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/a25e651d-c5f4-3617-b824-e7074c91b763.png" width="500">


## キーボード入力を変える
画像などでの説明はありませんが、A、Dキーで操作できるようになりました

		// 左キーが押されていたら | If left key is pressed
		if (KeyA.pressed())
		{
			// プレイヤーが左に移動する | Player moves left
			playerPosX = Max((playerPosX - speed * Scene::DeltaTime()), 60.0);
			isPlayerFacingRight = false;
		}

		// 右キーが押されていたら | If right key is pressed
		if (KeyD.pressed())
		{
			// プレイヤーが右に移動する | Player moves right
			playerPosX = Min((playerPosX + speed * Scene::DeltaTime()), 740.0);
			isPlayerFacingRight = true;
		}

  ## 描くプレイヤーを変える
  scaledでサイズを変えるサンプルです。
  さっき風車の画像でscaledで遊んでしまったのですがここで説明がありました…。
  羊が小さくなったのでもっと増やしました。
  
		// プレイヤーを描く | Draw the player
		for (int i = 0; i < 7; i++) {
			emoji.scaled(0.5).mirrored(isPlayerFacingRight).drawAt(playerPosX+i*50, 540);
		}


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/fc25e85e-b10b-0df8-d1a4-43455ec88540.png" width="500">

# 所感
サンプルだけでも色々改造して遊べそうです。
このチュートリアルを起点に、これはどうなっているのか、とかこういう機能はあるのか…を調べていくだけでも勉強になるなという印象でした。
もっといじって羊さん捜索ゲームを作りたくなってきました。