Flutter Flame教程9 -- Color and Palette 颜色和调色板

3,232 阅读2分钟

调色板


在游戏中,有许多的地方需要用到颜色。在dart:ui中有两个相关类可以被使用,Color和Paint。

Color类只是一个简单ARGB颜色的16进制整数格式的包装,所以,为了创建Color对象,只需要将ARGB格式的整数作为color参数传递即可。

你可以使用Dart的16进制表示法来简化它。比如,0xFF00FF00是完全不透明的绿色(掩码是0xAARRGGBB).请注意头两个16进制位表示透明度,而不像不同的RGB。最大值(FF = 256)表示完全不透明。

有一个颜色枚举,可以更简单的使用普通的颜色。它位于material flutter包中:

    import 'package:flutter/material.dart' as material;
    Color color = material.Colors.black;

一些更复杂的方法需要使用画笔,那是更完整的选择,允许定义更多与描边、颜色、过滤器、混合模式等属性相关的选项。然而,通常在使用更复杂的API时,你只需要一个单一简单直白颜色的画笔实例。

你可以通过这样来创建画笔:

    Paint green = Paint()..color = const Color(0xFF00FF00);

为了帮助和保持游戏颜色调色板的连续性,Flame添加了一个Palette类。你可以通过使用它来获取需要的颜色和画笔,也可以定义游戏中使用的颜色常量,这样你就不会搞混了。

BasicPalette类是调色板外观的一个示例,添加了黑色和白色。所以为了使用黑色或者白色,你可以直接从BasicPalette中获取;比如,使用color:

    TextConfig regular = TextConfig(color: BasicPalette.white.color);

或者使用paint:

    canvas.drawRect(rect, BasicPalette.black.paint);

同时,你也可以创建自己的调色板,照着BasicPalatte的阳历,添加颜色调色板/样式到你的游戏中。然后你就可以在你的组件和类中,静态访问任何的颜色,而不会和RGB混在一起。下面是调色板的一个示例,来自于BGUG:

    import 'dart:ui';
    
    import 'package:flame/palette.dart';
    
    class Palette{
        static PaletteEntry white = BasicPalette.white;
        static PaletteEntry toastBackground = PaletteEntry(Color(0xFFAC3232));
        static PaletteEntry toastText = PaletteEntry(Color(0xFFDA9A00));
        
        static PaletteEntry grey = PaletteEntry(Color(0xFF404040));
        static PaletteEntry green = PaletteEntry(Color(0xFF54a286));
    }

PaletteEntry 是一个可以保存颜色信息的常量类,有两个属性:

  • color: 返回特定的颜色color
  • paint: 创建一个与特定颜色相关的画笔PaintPaint不是一个常量类,所以每次被调用时,这个属性都会创建一个全新的类。同步改变Paint是安全的。