Slick2D alpha map coloured lights

I am using the Slick2D engine.

I’ve followed this snippet for creating light sources. I have followed step step, added what is actually important for me, and tested it and the lighting effects worked.

But when I tried to add different colors, it acted the same as if I add 255, 255, 255

I have the Surface class, which implements WorldLayer, Lightable. This class contains the LightContainer class, which should serve the Lightable WorldLayer.

This is my Surface class:


public class Surface implements WorldLayer, Lightable {

    private TileMap map = new TileMap(50, 50);
    private LightContainer lights = new LightContainer(new Sprite("light.png"), map);
    private DayLight dayLight = DayLight.AFTER_NOON;

    public Surface() {
        for (int x = 0; x < this.map.getWidth(); x++) {
            for (int y = 0; y < this.map.getHeight(); y++) {
                map.setTile(x, y, new Sprite("water.png"));
            }
        }
    }

    @Override
    public void update(int delta) {
        // TODO Auto-generated method stub

    }

    private int x = 0, y = 0;
    private long t;

    @Override
    public void render(GameContainer c, Graphics g) {
        this.map.setAlpha(this.dayLight.getLight());
        this.map.render(g);
        this.lights.render(c, g);
    }

    @Override
    public TileMap getMap() {
        return this.map;
    }

    @Override
    public LightContainer getLightContainer() {
        return this.lights;
    }
}

And my LightContainer class:


public class LightContainer {

    private List<Light> lights = new ArrayList<Light>();
    private Image lightSurface;
    private Color base = new Color(1f, 1f, 1f, 1f);
    private TileMap map;

    private Random random = new Random();

    public LightContainer(Sprite lightSource, TileMap map) {
        this.lightSurface = lightSource.getImage();
        this.map = map;
    }

    /**
     * Adds a new light source with a custom scale
     * @param x         X-asis position
     * @param y         Y-asis position
     * @param color     Color of the light
     * @param alpha     Light opacity
     * @param scale     Light scale
     */
    public void add(float x, float y, Color color, float alpha, float scale) {
        lights.add(new Light(x, y, alpha, scale, color));
    }

    /**
     * Adds a new light source with default scale 1.0f
     * @param x         X-asis position
     * @param y         Y-asis position
     * @param color     Color of the light
     * @param alpha     Light opacity
     */
    public void add(float x, float y, Color color, float alpha) {
        lights.add(new Light(x, y, alpha, color));
    }

    /**
     * Generates a new light source with a random scale
     * @param x         X-asis position
     * @param y         Y-asis position
     */
    public void generate(float x, float y) {
        this.generate(x, y, this.random.nextFloat());
    }

    /**
     * Generates a new light source with given coordinates and scale
     * @param x         X-asis position
     * @param y         Y-asis position
     * @param scale     Light scale
     */
    public void generate(float x, float y, float scale) {
        float alpha = 1.0f;
        Color color = new Color(11, 213, 105);
        this.add(x, y, color, alpha, scale);
    }

    /**
     * Removes light index
     * @param index The index of the light
     */
    public void remove(int index) {
        this.lights.remove(index);
    }

    /**
     * Gets light by index
     * @param index Index of the light
     * @return Light object
     */
    public Light get(int index) {
        return this.lights.get(index);
    }

    /**
     * Gets the amount of lights
     * @return Amount of lights
     */
    public int getLength() {
        return this.lights.size();
    }

    /**
     * Gets the width of light source
     * @return Width
     */
    public int getWidth() {
        return this.lightSurface.getWidth();
    }

    /**
     * Gets the height of the light source
     * @return Height
     */
    public int getHeight() {
        return this.lightSurface.getHeight();
    }

    /**
     * Sets temp color base
     * @param f
     */
    public void setBaseAlpha(float f) {
        this.base.a = f;
    }

    /**
     * Gets the light source image
     * @return
     */
    public Image getLightSurface() {
        return this.lightSurface;
    }

    /**
     * Sets a new map
     * @param map   TileMap
     */
    public void setMap(TileMap map) {
        this.map = map;
    }

    /**
     * Renders the lights
     * @param c GameContainer
     * @param g Graphics
     */
    public void render(GameContainer c, Graphics g) {
        for (int i = 0; i < this.lights.size(); i++) {
            Light light = this.lights.get(i);

            g.setDrawMode(Graphics.MODE_ALPHA_MAP);
            g.clearAlphaMap();

            int alphaW = (int) (this.getWidth() * light.getScale());
            int alphaH = (int) (this.getHeight() * light.getScale());
            int alphaX = (int) (light.getX() - alphaW / 2f);
            int alphaY = (int) (light.getX() - alphaH / 2f);

            this.base.a = light.getAlpha();

            this.lightSurface.draw(alphaX, alphaY, alphaW, alphaW, this.base);

            g.setDrawMode(Graphics.MODE_ALPHA_BLEND);
            g.setClip(0, 0, c.getWidth(), c.getHeight());

            light.getColor().bind();
            System.out.println(light.getColor().r);
            this.map.render(g);
            g.clearClip();
        }

        g.setDrawMode(Graphics.MODE_NORMAL);
    }
}

The actual light source drawing happens in LightContainer, at the bottom. If you looked at the Surface class, I first draw the original map, and set the day light amount (this is the alpha value of the tiles in the map).

And then I draw the light sources for this layer using the LightContainer’s instance.

As a test, in the main class I called LightContainer#generate(float, float, float) to test if the generating light works, but it seems like it won’t render colors of the lights!

    
    this.earth = new Surface();
    this.earth.getLightContainer().generate(150, 150, 1.0f);

Outcome:

As you see, the light is simply white.

What is causing it to look so white? How can I make this support colors?

When working with float colors the range is from 0f to 1f.
So (0f, 0f, 0f, 1f) is black and (1f, 1f, 1f, 1f) is white.
When you put in (150, 150, 150, 1f) it gets rounded to (1f, 1f, 1f, 1f) :slight_smile:

Try with (0.5f, 0.5f, 0.5f, 1f) :point:

I’ve tried, it doesn’t work.
Probably because I dont use spriteSheet.startUse, so color.bind() won’t affect the image.
So is there another way of doing this?