Flutter Flame教程9 -- Color and Palette 顏色和調色盤

我跑步前腳先著地發表於2020-05-04
Flutter

調色盤

在遊戲中，有許多的地方需要用到顏色。在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: 建立一個與特定顏色相關的畫筆Paint。Paint不是一個常量類，所以每次被呼叫時，這個屬性都會建立一個全新的類。同步改變Paint是安全的。

相關文章