adi_screen tutorial 5: Styles From Images

Tutorial #5: Styles From Images

Having a sprite that's just a gradient is kinda boring. Let's make it more exciting!

Opaque Style

The opaque style is a style that renders an opaque image ( no transparency ). Replace:

	let sprite = Sprite::create(&mut window, &include!("res/sprite.data"),
		Style::create().gradient(), 1);

With,

	let style = Style::create().opaque(&mut window,
		include_bytes!("res/logo.ppm"));
	let sprite = Sprite::create(&mut window, &include!("res/sprite.data"),
		style, 1);

There's 2 parameters to the opaque() function. Window and image data. For this, we're using the same image we already are using for the icon. There's one more thing we have to do. Replace the sprite.data file with:

[

-1.0, -1.0, 0.0, 1.0,	0.0, 0.0, 1.0, 1.0,
1.0, 1.0, 0.0, 1.0,	1.0, 1.0, 1.0, 1.0,
1.0, -1.0, 0.0, 1.0,	1.0, 0.0, 1.0, 1.0,

1.0, 1.0, 0.0, 1.0,	1.0, 1.0, 1.0, 1.0,
-1.0, -1.0, 0.0, 1.0,	0.0, 0.0, 1.0, 1.0,
-1.0, 1.0, 0.0, 1.0,	0.0, 1.0, 1.0, 1.0,

]

Here's the difference. Instead of gradient()'s XYZW RGBA we have XYZW XY 1.0 1.0, with the second X and Y being texture coordinates. Now, you can run your program.

Subtransparent

Subtransparent is a style that allows you to key out a color ( an alpha key ). The color is turned into transparency. Let's try it on black.

Replace:

	let style = Style::create().opaque(&mut window,
		include_bytes!("res/logo.ppm"));

With,

	let style = Style::create().subtransparent(&mut window,
		include_bytes!("res/logo.ppm"), (0, 0, 0));

Run it and look at the bird above the tree. How cool is that?