🦀
chip4. bevyの名前付きカラー
はじめに
2024/09/16時点の内容です。
- rustc 1.81.0
- bevy 0.14.2
bevyは開発初期段階のOSSで、まだまだ破壊的なアップデートが入ります。
でも、面白いですよ。
前回
chip3. "Hello, world!"の見た目をいじる
bevyのカラー
bevyはv0.14の時に色に関する設計を改めました。
0.13までは、CSSゆずりの名前付きカラー(Color::YELLOW等)で色を指定する流儀でしたが、もっと詳細・正確に色空間を扱えるように色システムが拡張されました。
それまでの名前付きカラーを使うには
結果的に名前付きカラーはcrateの中で目立たたない場所に移されました。使う場合、コードも一手間増えます。
0.13
use bevy::prelude::*;
fn main()
{ let white = Color::WHITE;
let red = Color::RED;
let blue = Color::BLUE;
let cyan = Color::CYAN;
}
0.14
use bevy::prelude::*;
use bevy::color::palettes::css;
fn main()
{ let white = Color::WHITE; //白と黒、それとNONEは以前と同じでもOK
let red = Color::Srgba ( css::RED ); //一手間増えた感じ。
let blue: Color = css::BLUE.into(); //一応.into()も実装されている。
let cyan = Color::Srgba( css::AQUA ); //名前が変わった色もある
}
名前付きカラーを全部表示してみた
タイトル通りですが、人間の目には微妙過ぎて区別のつかない色が多数あります。（DARK_GRAYとDARK_GREYのようなエイリアスもあるし）
あんまり意味なかったな‥‥ (^_^;)
use bevy::
{ prelude::*,
log::LogPlugin, //ログ出力の制御
color::palettes::*
};
//メイン関数
fn main() -> AppExit
{ App::new()
.add_plugins
( //ウインドウやスケジュール等、各種の面倒を見てもらう
DefaultPlugins
.set( LogPlugin { filter: "warn".into(), ..default() } )
)
.add_systems( Startup, spawn_color_sprite ) //スプライトを表示する
.run()
}
//スプライトを表示する
fn spawn_color_sprite( mut cmds: Commands )
{ //2Dカメラをspawnする
cmds.spawn( Camera2dBundle::default() );
//カラーのリストの準備
let basci_colors = vec!
[ //v0.14.2 bevy::color::palettes::basic
basic::AQUA,
basic::BLACK,
basic::BLUE,
basic::FUCHSIA,
basic::GRAY,
basic::GREEN,
basic::LIME,
basic::MAROON,
basic::NAVY,
basic::OLIVE,
basic::PURPLE,
basic::RED,
basic::SILVER,
basic::TEAL,
basic::WHITE,
basic::YELLOW,
];
let css_colors = vec!
[ //v0.14.2 bevy::color::palettes::css
css::ALICE_BLUE,
css::ANTIQUE_WHITE,
css::AQUA,
css::AQUAMARINE,
css::AZURE,
css::BEIGE,
css::BISQUE,
css::BLACK,
css::BLANCHED_ALMOND,
css::BLUE,
css::BLUE_VIOLET,
css::BROWN,
css::BURLYWOOD,
css::CADET_BLUE,
css::CHARTREUSE,
css::CHOCOLATE,
css::CORAL,
css::CORNFLOWER_BLUE,
css::CORNSILK,
css::CRIMSON,
css::DARK_BLUE,
css::DARK_CYAN,
css::DARK_GOLDENROD,
css::DARK_GRAY,
css::DARK_GREEN,
css::DARK_GREY,
css::DARK_KHAKI,
css::DARK_MAGENTA,
css::DARK_OLIVEGREEN,
css::DARK_ORANGE,
css::DARK_ORCHID,
css::DARK_RED,
css::DARK_SALMON,
css::DARK_SEA_GREEN,
css::DARK_SLATE_BLUE,
css::DARK_SLATE_GRAY,
css::DARK_SLATE_GREY,
css::DARK_TURQUOISE,
css::DARK_VIOLET,
css::DEEP_PINK,
css::DEEP_SKY_BLUE,
css::DIM_GRAY,
css::DIM_GREY,
css::DODGER_BLUE,
css::FIRE_BRICK,
css::FLORAL_WHITE,
css::FOREST_GREEN,
css::FUCHSIA,
css::GAINSBORO,
css::GHOST_WHITE,
css::GOLD,
css::GOLDENROD,
css::GRAY,
css::GREEN,
css::GREEN_YELLOW,
css::GREY,
css::HONEYDEW,
css::HOT_PINK,
css::INDIAN_RED,
css::INDIGO,
css::IVORY,
css::KHAKI,
css::LAVENDER,
css::LAVENDER_BLUSH,
css::LAWN_GREEN,
css::LEMON_CHIFFON,
css::LIGHT_BLUE,
css::LIGHT_CORAL,
css::LIGHT_CYAN,
css::LIGHT_GOLDENROD_YELLOW,
css::LIGHT_GRAY,
css::LIGHT_GREEN,
css::LIGHT_GREY,
css::LIGHT_PINK,
css::LIGHT_SALMON,
css::LIGHT_SEA_GREEN,
css::LIGHT_SKY_BLUE,
css::LIGHT_SLATE_GRAY,
css::LIGHT_SLATE_GREY,
css::LIGHT_STEEL_BLUE,
css::LIGHT_YELLOW,
css::LIME,
css::LIMEGREEN,
css::LINEN,
css::MAGENTA,
css::MAROON,
css::MEDIUM_AQUAMARINE,
css::MEDIUM_BLUE,
css::MEDIUM_ORCHID,
css::MEDIUM_PURPLE,
css::MEDIUM_SEA_GREEN,
css::MEDIUM_SLATE_BLUE,
css::MEDIUM_SPRING_GREEN,
css::MEDIUM_TURQUOISE,
css::MEDIUM_VIOLET_RED,
css::MIDNIGHT_BLUE,
css::MINT_CREAM,
css::MISTY_ROSE,
css::MOCCASIN,
css::NAVAJO_WHITE,
css::NAVY,
css::OLD_LACE,
css::OLIVE,
css::OLIVE_DRAB,
css::ORANGE,
css::ORANGE_RED,
css::ORCHID,
css::PALE_GOLDENROD,
css::PALE_GREEN,
css::PALE_TURQUOISE,
css::PALE_VIOLETRED,
css::PAPAYA_WHIP,
css::PEACHPUFF,
css::PERU,
css::PINK,
css::PLUM,
css::POWDER_BLUE,
css::PURPLE,
css::REBECCA_PURPLE,
css::RED,
css::ROSY_BROWN,
css::ROYAL_BLUE,
css::SADDLE_BROWN,
css::SALMON,
css::SANDY_BROWN,
css::SEASHELL,
css::SEA_GREEN,
css::SIENNA,
css::SILVER,
css::SKY_BLUE,
css::SLATE_BLUE,
css::SLATE_GRAY,
css::SLATE_GREY,
css::SNOW,
css::SPRING_GREEN,
css::STEEL_BLUE,
css::TAN,
css::TEAL,
css::THISTLE,
css::TOMATO,
css::TURQUOISE,
css::VIOLET,
css::WHEAT,
css::WHITE,
css::WHITE_SMOKE,
css::YELLOW,
css::YELLOW_GREEN,
];
let tailwind_colors = vec!
[ //v0.14.2 bevy::color::palettes::tailwind
tailwind::AMBER_50,
tailwind::AMBER_100,
tailwind::AMBER_200,
tailwind::AMBER_300,
tailwind::AMBER_400,
tailwind::AMBER_500,
tailwind::AMBER_600,
tailwind::AMBER_700,
tailwind::AMBER_800,
tailwind::AMBER_900,
tailwind::AMBER_950,
tailwind::BLUE_50,
tailwind::BLUE_100,
tailwind::BLUE_200,
tailwind::BLUE_300,
tailwind::BLUE_400,
tailwind::BLUE_500,
tailwind::BLUE_600,
tailwind::BLUE_700,
tailwind::BLUE_800,
tailwind::BLUE_900,
tailwind::BLUE_950,
tailwind::CYAN_50,
tailwind::CYAN_100,
tailwind::CYAN_200,
tailwind::CYAN_300,
tailwind::CYAN_400,
tailwind::CYAN_500,
tailwind::CYAN_600,
tailwind::CYAN_700,
tailwind::CYAN_800,
tailwind::CYAN_900,
tailwind::CYAN_950,
tailwind::EMERALD_50,
tailwind::EMERALD_100,
tailwind::EMERALD_200,
tailwind::EMERALD_300,
tailwind::EMERALD_400,
tailwind::EMERALD_500,
tailwind::EMERALD_600,
tailwind::EMERALD_700,
tailwind::EMERALD_800,
tailwind::EMERALD_900,
tailwind::EMERALD_950,
tailwind::FUCHSIA_50,
tailwind::FUCHSIA_100,
tailwind::FUCHSIA_200,
tailwind::FUCHSIA_300,
tailwind::FUCHSIA_400,
tailwind::FUCHSIA_500,
tailwind::FUCHSIA_600,
tailwind::FUCHSIA_700,
tailwind::FUCHSIA_800,
tailwind::FUCHSIA_900,
tailwind::FUCHSIA_950,
tailwind::GRAY_50,
tailwind::GRAY_100,
tailwind::GRAY_200,
tailwind::GRAY_300,
tailwind::GRAY_400,
tailwind::GRAY_500,
tailwind::GRAY_600,
tailwind::GRAY_700,
tailwind::GRAY_800,
tailwind::GRAY_900,
tailwind::GRAY_950,
tailwind::GREEN_50,
tailwind::GREEN_100,
tailwind::GREEN_200,
tailwind::GREEN_300,
tailwind::GREEN_400,
tailwind::GREEN_500,
tailwind::GREEN_600,
tailwind::GREEN_700,
tailwind::GREEN_800,
tailwind::GREEN_900,
tailwind::GREEN_950,
tailwind::INDIGO_50,
tailwind::INDIGO_100,
tailwind::INDIGO_200,
tailwind::INDIGO_300,
tailwind::INDIGO_400,
tailwind::INDIGO_500,
tailwind::INDIGO_600,
tailwind::INDIGO_700,
tailwind::INDIGO_800,
tailwind::INDIGO_900,
tailwind::INDIGO_950,
tailwind::LIME_50,
tailwind::LIME_100,
tailwind::LIME_200,
tailwind::LIME_300,
tailwind::LIME_400,
tailwind::LIME_500,
tailwind::LIME_600,
tailwind::LIME_700,
tailwind::LIME_800,
tailwind::LIME_900,
tailwind::LIME_950,
tailwind::NEUTRAL_50,
tailwind::NEUTRAL_100,
tailwind::NEUTRAL_200,
tailwind::NEUTRAL_300,
tailwind::NEUTRAL_400,
tailwind::NEUTRAL_500,
tailwind::NEUTRAL_600,
tailwind::NEUTRAL_700,
tailwind::NEUTRAL_800,
tailwind::NEUTRAL_900,
tailwind::NEUTRAL_950,
tailwind::ORANGE_50,
tailwind::ORANGE_100,
tailwind::ORANGE_200,
tailwind::ORANGE_300,
tailwind::ORANGE_400,
tailwind::ORANGE_500,
tailwind::ORANGE_600,
tailwind::ORANGE_700,
tailwind::ORANGE_800,
tailwind::ORANGE_900,
tailwind::ORANGE_950,
tailwind::PINK_50,
tailwind::PINK_100,
tailwind::PINK_200,
tailwind::PINK_300,
tailwind::PINK_400,
tailwind::PINK_500,
tailwind::PINK_600,
tailwind::PINK_700,
tailwind::PINK_800,
tailwind::PINK_900,
tailwind::PINK_950,
tailwind::PURPLE_50,
tailwind::PURPLE_100,
tailwind::PURPLE_200,
tailwind::PURPLE_300,
tailwind::PURPLE_400,
tailwind::PURPLE_500,
tailwind::PURPLE_600,
tailwind::PURPLE_700,
tailwind::PURPLE_800,
tailwind::PURPLE_900,
tailwind::PURPLE_950,
tailwind::RED_50,
tailwind::RED_100,
tailwind::RED_200,
tailwind::RED_300,
tailwind::RED_400,
tailwind::RED_500,
tailwind::RED_600,
tailwind::RED_700,
tailwind::RED_800,
tailwind::RED_900,
tailwind::RED_950,
tailwind::ROSE_50,
tailwind::ROSE_100,
tailwind::ROSE_200,
tailwind::ROSE_300,
tailwind::ROSE_400,
tailwind::ROSE_500,
tailwind::ROSE_600,
tailwind::ROSE_700,
tailwind::ROSE_800,
tailwind::ROSE_900,
tailwind::ROSE_950,
tailwind::SKY_50,
tailwind::SKY_100,
tailwind::SKY_200,
tailwind::SKY_300,
tailwind::SKY_400,
tailwind::SKY_500,
tailwind::SKY_600,
tailwind::SKY_700,
tailwind::SKY_800,
tailwind::SKY_900,
tailwind::SKY_950,
tailwind::SLATE_50,
tailwind::SLATE_100,
tailwind::SLATE_200,
tailwind::SLATE_300,
tailwind::SLATE_400,
tailwind::SLATE_500,
tailwind::SLATE_600,
tailwind::SLATE_700,
tailwind::SLATE_800,
tailwind::SLATE_900,
tailwind::SLATE_950,
tailwind::STONE_50,
tailwind::STONE_100,
tailwind::STONE_200,
tailwind::STONE_300,
tailwind::STONE_400,
tailwind::STONE_500,
tailwind::STONE_600,
tailwind::STONE_700,
tailwind::STONE_800,
tailwind::STONE_900,
tailwind::STONE_950,
tailwind::TEAL_50,
tailwind::TEAL_100,
tailwind::TEAL_200,
tailwind::TEAL_300,
tailwind::TEAL_400,
tailwind::TEAL_500,
tailwind::TEAL_600,
tailwind::TEAL_700,
tailwind::TEAL_800,
tailwind::TEAL_900,
tailwind::TEAL_950,
tailwind::VIOLET_50,
tailwind::VIOLET_100,
tailwind::VIOLET_200,
tailwind::VIOLET_300,
tailwind::VIOLET_400,
tailwind::VIOLET_500,
tailwind::VIOLET_600,
tailwind::VIOLET_700,
tailwind::VIOLET_800,
tailwind::VIOLET_900,
tailwind::VIOLET_950,
tailwind::YELLOW_50,
tailwind::YELLOW_100,
tailwind::YELLOW_200,
tailwind::YELLOW_300,
tailwind::YELLOW_400,
tailwind::YELLOW_500,
tailwind::YELLOW_600,
tailwind::YELLOW_700,
tailwind::YELLOW_800,
tailwind::YELLOW_900,
tailwind::YELLOW_950,
tailwind::ZINC_50,
tailwind::ZINC_100,
tailwind::ZINC_200,
tailwind::ZINC_300,
tailwind::ZINC_400,
tailwind::ZINC_500,
tailwind::ZINC_600,
tailwind::ZINC_700,
tailwind::ZINC_800,
tailwind::ZINC_900,
tailwind::ZINC_950,
];
let palettes = [ basci_colors, css_colors, tailwind_colors ];
//スプライトを敷き詰める
let custom_size = Some ( Vec2::splat( 40.0 ) * 0.9 );
let mut count = 0;
for palette in palettes
{ for color in palette
{ //スプライトの色と位置
let color = color.into();
let vec3 = Vec3::new
( ( count % 32 ) as f32 * 40.0 - 640.0 + 20.0,
( count / 32 ) as f32 * -40.0 + 360.0 - 20.0, //Y軸は符号反転
0.0
);
//スプライトをspawnする
cmds.spawn( SpriteBundle::default() )
.insert( Sprite { color, custom_size, ..default() } )
.insert( Transform::from_translation( vec3 ) );
count += 1;
}
}
}
Discussion