Skip to content

13. Drawing Emojis

Learn how to draw emojis on the screen.

13.1 Textures and Emojis

Textures

  • In Siv3D, images drawn on the screen are managed as textures (Texture class)
  • Textures can be created from image files or images generated by programs
  • The simplest way to create a texture is from emojis

Types of Emojis

  • Siv3D comes with over 3,700 types of emojis by default
  • You can create a texture from an emoji with simple code like this:
Texture texture{ U"🐈"_emoji };

13.2 Drawing Emojis

  • Since texture creation is costly, do it before the main loop
  • To display a texture on screen, use .drawAt(x, y) or .drawAt(pos)
    • This draws the texture centered at the specified coordinates

# include <Siv3D.hpp>

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	const Texture emoji1{ U"🐈"_emoji };
	const Texture emoji2{ U"🍎"_emoji };

	while (System::Update())
	{
		emoji1.drawAt(100, 100);
		emoji1.drawAt(400, 300);

		emoji2.drawAt(200, 300);        
		emoji2.drawAt(Cursor::Pos());
	}
}

13.3 Scaling Emojis

  • The default emoji size is 136x128 pixels including margins (transparent parts)
  • By inserting .scaled(scale factor) before .drawAt(), you can draw the texture scaled by the specified factor
  • For example, .scaled(0.5).drawAt(Cursor::Pos()); draws the texture at 50% size

# include <Siv3D.hpp>

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	const Texture emoji1{ U"🐈"_emoji };
	const Texture emoji2{ U"🍎"_emoji };

	while (System::Update())
	{
		emoji1.scaled(0.5).drawAt(100, 100);
		emoji1.scaled(2).drawAt(400, 300);

		emoji2.scaled(0.3).drawAt(200, 300);
	}
}

13.4 Rotating Emojis

  • By inserting .rotated(clockwise angle) before .drawAt(), you can draw the texture rotated by the specified angle
  • Angles are specified in radians where one full rotation (360°) equals 2π
  • If you prefer degrees, use the _deg literal that converts degrees to radians, like 45_deg, 90_deg
_deg notation Radians
0_deg 0.0
45_deg 0.78539816339
90_deg 1.57079632679
180_deg 3.14159265359
360_deg 6.28318530718
  • For example, specifying 10_deg rotates the emoji 10° clockwise

# include <Siv3D.hpp>

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	const Texture emoji1{ U"🐈"_emoji };
	const Texture emoji2{ U"🍎"_emoji };

	while (System::Update())
	{
		emoji1.rotated(10_deg).drawAt(100, 100);
		emoji1.rotated(-45_deg).drawAt(400, 300);

		emoji2.rotated(180_deg).drawAt(200, 300);
	}
}

13.5 Combining Scaling and Rotation of Emojis

  • By using .scaled(scale factor).rotated(clockwise angle), you can perform scaling and rotation simultaneously

# include <Siv3D.hpp>

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	const Texture emoji1{ U"🐈"_emoji };
	const Texture emoji2{ U"🍎"_emoji };

	while (System::Update())
	{
		emoji1.scaled(0.5).rotated(10_deg).drawAt(100, 100);
		emoji1.scaled(2).rotated(-45_deg).drawAt(400, 300);

		emoji2.scaled(0.3).rotated(180_deg).drawAt(200, 300);
	}
}

13.6 Horizontally Flipping Emojis

  • By inserting .mirrored(flip) before .drawAt(), you can draw the texture horizontally flipped
  • flip is a bool type; specifying true flips horizontally. When false, it draws in the original orientation
  • The following code gets the mouse cursor's X coordinate with Cursor::Pos().x and horizontally flips the emoji (making the cat face right) when the mouse cursor is to the right of the emoji

Horizontally flip emoji based on mouse cursor X coordinate
# include <Siv3D.hpp>

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	const Texture emoji1{ U"🐈"_emoji };

	while (System::Update())
	{
		const int32 cursorX = Cursor::Pos().x;

		emoji1.mirrored(400 <= cursorX).drawAt(400, 300);
	}
}

Review Checklist

  • Learned that textures are used when drawing images
  • Learned that textures can be created from emojis
  • Learned that Siv3D has over 3,000 types of emojis available and can draw them with the same design on any platform
  • Learned that textures should be created before the main loop
  • Learned to display textures on screen with .drawAt(x, y) or .drawAt(pos)
  • Learned to scale textures with .scaled(scale factor)
  • Learned to rotate textures with .rotated(clockwise angle)
  • Learned that using the _deg literal allows writing angles in degrees
  • Learned to perform texture scaling and rotation simultaneously with .scaled(scale factor).rotated(clockwise angle)
  • Learned to horizontally flip textures with .mirrored(flip)