The palette

In games, there are many areas where color is needed. There are two related classes that can be used in DART: UI, Color and Paint.

The Color class is just a wrapper around the hexadecimal integer format of a simple ARGB Color, so to create a Color object, just pass the ARGB integer as the Color argument.

You can simplify this by using Dart’s hexadecimal notation. For example,0xFF00FF00 is completely opaque green (the mask is 0xAARRGGBB). Note that the first two hexadecimal bits represent transparency, unlike the different RGB. The maximum value (FF = 256) indicates complete opacity.

There is a color enumeration to make it easier to use normal colors. It is located in the Material Flutter package:

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

Some of the more complex methods require the use of a brush, which is a more complete option, allowing you to define more options related to properties such as stroke, color, filter, blend mode, and so on. However, often with more complex apis, you only need a single brush instance with a simple, straightforward color.

You can create a brush like this:

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

To help and maintain continuity in the game’s color Palette, Flame adds a Palette class. You can use it to get the colors and brushes you need, and you can define the color constants to use in the game so you don’t get confused.

The BasicPalette class is an example of what a palette looks like, adding black and white. So to use black or white, you can grab it directly from the BasicPalette; For example, use color:

    TextConfig regular = TextConfig(color: BasicPalette.white.color);
Copy the code

Or use paint:

    canvas.drawRect(rect, BasicPalette.black.paint);
Copy the code

At the same time, you can create your own color palette and add color palettes/styles to your game following the solar calendar of BasicPalatte. You can then statically access any color in your components and classes without mixing it with RGB. Here’s an example of a palette from 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));
    }
Copy the code

PaletteEntry is a constant class that holds color information and has two properties:

  • Color: Returns a specific colorcolor.
  • Paint: Creates a brush associated with a specific colorPaint.PaintIs not a constant class, so every time it is called, this property creates a whole new class. Synchronizing changes to Paint is safe.