私のWebアプリケーション用のキャンバス図面

Question

私はちょうど私のWebゲームプロジェクト用のCanvasを使い始めて、問題に直面しました。

私はゲームをレンダリングするために、このコードを使用しています：

function render(f){ 
if(charoffset.x == null) charoffset.x = charpos.x*tilescale; 
if(charoffset.y == null) charoffset.y = charpos.y*tilescale; 

if(!tiles) tiles = []; 
if(f){ 
    log("Welcome.","gold"); 

} 
var canPassthrough = function(){ 
    if ((def.passable(this.type))&&(typeof this.type !== 'undefined')){ 
     return true; 
    } 
    else { 
     return false; 
    } 
}; 
if(!f) lighting.update(); 
canvas.getContext("2d").clearRect(0,0,sq,sq); 
for (var i = 0; i < map[charlvl].length; i++){ 
    if(!tiles[i]) tiles[i] = []; 
    for (var j = 0; j < map[charlvl][i].length; j++){ 
     if(!tiles[i][j]) tiles[i][j] = placetile(i,j); 
     drawtile(tiles[i][j]); 
     placeitem(i,j); 
    } 
} 
ui.overlay.text("casting shadows..."); 
//shadowcaster(20); 
    var tex = document.createElement("img"); 
    tex.src = "../img/charplaceholder.png"; 
    var hero = canvas.getContext("2d"); 
    hero.globalAlpha = 1.0; 
    if(charoffset.x>=map_scroll.x&&charoffset.y*tilescale>=map_scroll.y){ 
     var pos = { 
      x: charoffset.x - map_scroll.x - tilescale, 
      y: charoffset.y - map_scroll.y - tilescale 
     }; 
     hero.drawImage(tex,pos.x,pos.y,tilescale,tilescale); 
    } 
function placetile(x,y){ 
    var obj = {}; 
    obj.type = map[charlvl][x][y].id; 
    obj.canPassthrough = canPassthrough; 
    obj.state = {explored: false, lit: false}; 
    obj.coords = {x:x,y:y}; 
    obj.offset = {x:x*tilescale,y:y*tilescale}; 
    return obj; 
} 
function drawtile(t){ 
    if(t.offset.x>=map_scroll.x&&t.offset.y>=map_scroll.y){ 
     var pos = { 
      x: t.offset.x - map_scroll.x - tilescale, 
      y: t.offset.y - map_scroll.y - tilescale 
     }; 
     if(!t.state.explored&&!t.state.lit){ 
      return false; 
     } 
     else if(t.state.lit&&t.state.explored){ 

      var tex = document.createElement("img"); 
      var tile = canvas.getContext("2d"); 
      tex.src = def.css.tile(t.type); 
      tile.globalAlpha = 1.0; 
      tile.drawImage(tex,pos.x,pos.y,tilescale,tilescale); 
      return true; 
     } 
     else if(t.state.explored&&!t.state.lit){ 
      var tex = document.createElement("img"); 
      var tile = canvas.getContext("2d"); 
      tex.src = def.css.tile(t.type); 
      tile.globalAlpha = 0.25; 
      tile.drawImage(tex,pos.x,pos.y,tilescale,tilescale); 
      return true; 
     } 
    } 
} 
function placeitem(x,y){ 
    return; 
    if (loot[charlvl][x][y]){ 
     for(var i=0;i<loot[charlvl][x][y].length;i++){ 
      var tile = document.createElement("div"); 
      var tileid = loot[charlvl][x][y][i].type; 
      tile.className = def.css.item(tileid); 
      tile.coords = {x:x,y:y}; 
      document.getElementById("x" + x + "y" + y).appendChild(tile); 
     } 
    } 
} 

if(f){ 
    camera.center(charpos.x,charpos.y); 
    ui.overlay.text("loading the dungeon..."); 
    ui.overlay.hide(); 
} 
} 

機能render()はこれがあるなど動くキャラクター、マップのドラッグ、照明の更新、など様々なイベント、

によって発射されます結果：

私は壁に陰影の陰影を追加して壁がよりはっきりと見えるようにしたいと思います。私はキャンバスのコンテキストシャドウを試してみましたが、これを使ってみました： サイズが20,20の100,100の透明な矩形と影を描くことになっていますが、描画されるすべてのタイルに影が適用されます。

私は間違った描画を使用しているように感じる。誰も効果的にどのように説明することができます 希望の効果を達成するためにキャンバスを使用しますか？

Answer 1

2D APIシャドーオプションを使用しないでください。非常に遅いです（それはどれほど悪いのかを控えめに説明しています）。タイルセットの一部としてシャドウを作成し、ctx.globalAlphaを1未満に設定してレンダリングしたり、多くのコンポジットモードのいずれかを使用するほうがずっと優れています。例えばctx.globalCompositeOperation = "multiply";またはoverlay,color-burn,hard-lightおよびsoft-lightである。あなたは非常に良いシャドウ効果を得るために組み合わせを使うことさえできます。

シャドーAPIは、傾斜している可能性のあるスクリーンからはみ出した3Dオブジェクトではなく、フラットなオブジェクトの上にフラットなオブジェクトからキャストされたシャドウのためのものであるため、タイルセットの一部としてシャドーを作成すると、 z方向の辺を有する。

シャドウをタイルセットの一部として作成しない場合は、シャドウAPIオプションを使用してオフスクリーンキャンバスを使用してオンロード時にシャドウタイルセットを作成することを検討してください。アルファとコンポジットのオプションを使用してキャンバスからキャンバスにレンダリングします。