게임 화면의 배경은 사전에 그래픽 소프트 등을 사용해 화상 파일화해 읽어들인다고 하는 수법도 있습니다만, 모양의 종류이면 프로그램으로 리얼타임으로 묘화하는 쪽이 통신량이 대폭 줄어, 시행착오의 조정도 하고 쉽게 유지 보수가 상당히 쉬워집니다.

다음은 실제로 게임 내에서 사용되는 배경입니다.

HMG 대부호
htps : // 하세몽몬. 네 t/df5/

푸에르토와 같은 테이블 표면

캔버스에 베이스가 되는 색을 칠합니다.

// キャンバス

var w = 320, h = 320;    // キャンバスのサイズ
var cv = document.createElement("canvas");
cv.setAttribute("width", w);
cv.setAttribute("height", h);
var ctx = cv.getContext('2d');
ctx.fillStyle = "#45cc82";  // 単色塗り
ctx.fillRect(0, 0, w, h);

가공을 위해 캔버스에서 픽셀 데이터 배열을 가져옵니다.
1픽셀마다 R,G,B,A의 4데이터가 있으므로 배열 사이즈는 픽셀수*4가 됩니다.

// キャンバスからピクセルデータ配列を取得
var imageData = ctx.getImageData(0, 0, w, h);
var arrRGBA = imageData.data;

픽셀 단위로 노이즈를 더해 갑니다.
노이즈는 원래의 이미지의 색에 대해 색의 농도를 %로 변화시킨 것이 됩니다.
1픽셀마다 4개의 데이터이므로 for 루프는 4카운트 업해 갑니다.

// ピクセルデータ配列を加工
for (var i = 0, l = arrRGBA.length; i < l; i += 4) {
    var per = 0;
    // 色を変化させる%を乱数で決定（実際の出力を見ながらここで微調整を加えていく）
    var rnd = Math.random();
    if (rnd < 0.2) {
        per = Math.random() * 5 + 3;
    } else if (rnd > 0.8) {
        per = Math.random() * -2 - 1;
    }
    // 色を%変化させる
    arrRGBA[i + 0] = colorPer(arrRGBA[i + 0], per);
    arrRGBA[i + 1] = colorPer(arrRGBA[i + 1], per);
    arrRGBA[i + 2] = colorPer(arrRGBA[i + 2], per);
    arrRGBA[i + 3] = arrRGBA[i + 3];
}
// 色を%で変化させる関数
function colorPer(value, per) {
    if (per === 0) return value;
    var newValue = value + Math.floor(value * per / 100);
    newValue = (newValue > 255) ? 255 : newValue;
    newValue = (newValue < 0) ? 0 : newValue;
    return newValue;
}

캔버스에 픽셀 데이터를 다시 씁니다.

ctx.putImageData(imageData, 0, 0);

출력 결과


이것으로 푸에르토지의 입체적인 표면을 표현할 수 있었습니다.

조명에 의한 명암

방금 전 처리 루프 부분에 조명에 의한 명암 처리를 추가합니다.

var iy = 4 * 320;   // y毎の配列要素数
var cx = 160;   // グラデーションの中心x座標
var cy = 160;   // グラデーションの中心y座標

for (var i = 0, l = arrRGBA.length; i < l; i += 4) {
    var per = 0;
    var rnd = Math.random();
    if (rnd < 0.2) {
        per = Math.random() * 5 + 3;
    } else if (rnd > 0.8) {
        per = Math.random() * -2 - 1;
    }

    // 円グラデーション
    var x = (i % iy) / 4;       // iからピクセル座標xを計算
    var y = Math.floor(i / iy); // iからピクセル座標yを計算
    var r = Math.sqrt(Math.pow(cx - x, 2) + Math.pow(cy - y, 2));   // グラデーションの中心からの距離を計算
    per += -((r - 40) / 5); // 距離により色を変化させる%を変化させる

    arrRGBA[i + 0] = colorPer(arrRGBA[i + 0], per);
    arrRGBA[i + 1] = colorPer(arrRGBA[i + 1], per);
    arrRGBA[i + 2] = colorPer(arrRGBA[i + 2], per);
    arrRGBA[i + 3] = arrRGBA[i + 3];
}

출력 결과


이제 조명의 명암을 표현할 수 있었습니다.