Hi,

I want to develop a painting game released on the web and using HTML5 (canvas) and JavaScript.

This game will put yourself in the shoes of a painter which have to paint walls or areas.

The goal is to have only the inside of an area painted without painting on the outside of this area.

The score is calculated according mainly to :

• The area which is actually painted and had to be painted. (The more is painted, the higher is the score). I'll call it valid points.
• The outside of the area which had not to be painted and is painted (The more is painted, the lower is the score). I'll call it invalid points.

Due to the web platform, and for performance reasons, I approximate theses value by using the Monte Carlo Method.

The area can be a polygon so I use a rectangle which include all the area points to define the domain (I add more or less 20px each side or the rectangle to spot all possible invalid points).

I then randomly generate a certain amount of points to execute my tests and then come my problem :

I want to use a Game Engine or a Framework with basic game development functions (like Phaser or EaselJS) due to the ease of use and the performance they offers. The fact is I can't find one which allow pixel color comparison, or at least pixel selection.

Maybe I'm not searching for the right thing.

I really need you help just to put me on the track as I don't want to start developing without being sure this kind of game is feasible.

Thank you for reading this long post.

[attachment=23890:AlgoMonteCarlo.jpg]

For those who are interested, I've found how to do my painting game.
I must warn you that it may not be the best way to do it but it suits for my needs.

I used Unity to create my game with a simple script and a prefab.

The Tile prefab is a basic Quad.
I just changed its material's shader to Transparent/Diffuse with the color set to 255,255,255,0.
In fact only the Alpha value must be to 0, the others doesn't really matters a the color will be totally transparent.

Here is a sample of the script :

public Transform Tile;
public Material ColorMat;
public int gridHeight = 40, gridWidth = 40;

private Transform[] tiles;
private Vector3[] positions;

void Awake() {
    // Create a 16x16 square 
    brushArea = new Rect(0, 0, 16, 16);

    ...
}

void Start () {
    this.tiles = new Transform[9999];
    this.positions = new Vector3[9999];
    int count = 0;

    // i is the leftmost position,
    for (int i = -gridWidth/2; i <= gridWidth/2; i++) {
        // j is the lowest position
        for (int j = -gridHeight/2; j <= gridHeight/2; j++) {
            // I set the position to i*0.1f and j*0.1f because my Tile transform scale is set to 0.1.
            // Set it according to your prefab scale
            this.tiles[count] = (Transform) GameObject.Instantiate(Tile, new Vector3(i*0.1f, j*0.1f, 0), Quaternion.identity);
            this.positions[count] = Camera.main.WorldToScreenPoint(tiles[count].position);
            count++;
        }
    }
    ...
}

void Update () {
    brushArea.position = Input.mousePosition;

    if (Input.GetButton("Fire1")) {
        // Iterate over the tiles position array
        for(int k = this.positions.Length-1; k >= 0; k--) {
            // If a position is within the brushArea Rectangle
            if(brushArea.Contains(this.positions[k])) {
                // Directly access the GameObject and apply your changes to it.
                this.tiles[k].renderer.material = ColorMat;
            }
        }
    }
    ...
}

It works well while the grid size is not really huge. (Around 65 FPS with a 100x100 grid and Core i7-4500U / Radeon HD 8730M)