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

背景

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

開発環境

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

1. はじめての Siv3Dの実行

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

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

背景の色を変えてみる

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

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

できた　かわいい

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

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

7. 背景の色を変えるにも確かにやり方が載っています。Palette::Black、といったパレットを使う方法もありました。HTMLカラーの色名を使えるみたいです。

絵文字を変えてみる

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

const Texture emoji{ U"🌟"_emoji };

お気に入りの絵文字を入れてみたところ、エラーがでてダメでした。
[Windows] + [.] で出てくる絵文字を入れればよいようです。
25. テクスチャを描くによればEmojipediaで探せるとのこと。

const Texture emoji{ U"🐏"_emoji };

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

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

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);
	}

テクスチャの位置を変える

風車の画像の位置を変えてみます。

texture.draw(0, 0);

大きいので、こちらを参考にサイズも変えてみます。

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

テキストを変える

内容を変えて文字の位置も変えてみました。

	font(U"I'm so Happy🎶🎶🎶").draw(50, Vec2{ 20, 320 }, ColorF{ 0.2, 0.4, 0.8 });

マウスカーソルに追従する半透明の円を変えてみる

せっかくなので背景色も変えて、懐中電灯で探索風にしてみました。
照らすと説明文が読めます。

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

キーボード入力を変える

画像などでの説明はありませんが、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);
	}

所感

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