複数のキャンバスを使用することを決定するまで、描画は正常に機能していました。ステージ キャンバス、エンティティ キャンバス、オブジェクト キャンバスがあります。ただし、オブジェクト キャンバスとエンティティ キャンバスを組み合わせることになるでしょう。とにかく、以下に示すように、私のヒーロー クラスは問題なく描画されます。次に、同じ描画関数でエンティティ クラスを作成しようとしましたが、関数を呼び出しても描画できません。背景キャンバスにもほぼ同じ問題があります。バックグラウンド用のクラスはまだありませんが、そうします。しかし、ステージのコンテキストで単純に画像を描画しようとすると、コードが壊れます。
(JSFiddle をセットアップしようとしましたが、そこに画像を取得できませんでした。)
UPDATE 私の問題の半分はmarkEによって修正されました。私が現在抱えている唯一の問題は、entitiesCtx が画像/長方形を描画できる唯一のコンテキストであることです。他のctxは何も描画できません。助けてください！コードを更新しました。
var stage = document.getElementById('stage');
var ctxStage = stage.getContext('2d');
var entitiesStage = document.getElementById('entities');
var ctxEntities = entitiesStage.getContext('2d');
var bg = document.getElementById('bg');
var ctxBg = bg.getContext('2d');
var playerImg = new Image();
playerImg.src = 'res/player_sprite_sheet.png';
var bgImg = new Image();
bgImg.onload = function() {
ctxBg.drawImage(bgImg,0,0,80,50,-200,-90,1000,700);
};
bgImg.src = 'res/background.png';
var consoleImg = new Image();
consoleImg.onload = function() {
ctxEntities.drawImage(consoleImg,0,0,80,50,20,20,1000,700);
};
console.src = 'res/console.png';
var hero = new Hero();
var prop;
var isPlaying = false;
window.onload = init;
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
function init() {
console.debug('initializing...');
document.addEventListener('keydown',keyDown,false);
document.addEventListener('keyup',keyUp,false);
ctxStage.imageSmoothingEnabled = false;
ctxStage.webkitImageSmoothingEnabled = false;
ctxStage.mozImageSmoothingEnabled = false;
ctxEntities.imageSmoothingEnabled = false;
ctxEntities.webkitImageSmoothingEnabled = false;
ctxEntities.mozImageSmoothingEnabled = false;
prop = new Entity(consoleImg,20,20,80,50,0,0);
startLoop();
}
function startLoop(){
console.debug('starting loop...');
isPlaying = true;
loop();
}
function stopLoop(){
console.debug('stopping loop...');
isPlaying = false;
}
function loop(){
if(isPlaying){
requestAnimFrame(loop);
draw();
update();
}
}
function update(){
hero.update();
}
function clearCtx(){
ctxEntities.clearRect(0,0,stage.width,stage.height);
}
function draw(){
clearCtx();
ctxEntities.fillStyle = 'black';
ctxEntities.fillRect(0,0,stage.width,stage.height);
ctxEntities.drawImage(bgImg,0,0,80,50,-200,-90,1000,700);
hero.draw();
prop.draw();
}
// hero class
function Hero() {
this.xpos = 140;
this.ypos = 320;
this.srcX = 0;
this.srcY = 0;
this.width = 10;
this.height = 20;
this.scaleX = 50;
this.scaleY = 80;
this.isUpKey;
this.isDownKey;
this.isLeftKey;
this.isRightKey;
this.img = playerImg;
this.speed = 2;
this.defspeed = 3.5;
this.dir = 'right';
}
Hero.prototype.draw = function() {
ctxEntities.drawImage(this.img,this.srcX,this.srcY,this.width,this.height,this.xpos,this.ypos,this.scaleX,this.scaleY);
};
Hero.prototype.update = function() {
this.checkKeys();
if(this.dir == 'right'){
if(this.scaleX >= 0){
this.srcX = 0;
}
if(this.scaleX >= 40){
this.scaleX = 40;
this.speed = this.defspeed;
}else{
this.xpos -= 2.3;
this.speed = 0;
this.scaleX += 5;
}
}else if(this.dir =='left'){
if(this.scaleX <= 0){
this.srcX = 10;
}
if(this.scaleX <= -40){
this.scaleX = -40;
this.speed = this.defspeed;
}else{
this.xpos += 2.3;
this.speed = 0;
this.scaleX -= 5;
}
}
};
Hero.prototype.checkKeys = function() {
if(this.isLeftKey){
this.xpos += -this.speed;
this.dir = 'left';
}
if(this.isRightKey){
this.xpos += this.speed;
this.dir = 'right';
}
};
// end of hero class
// entity class
function Entity(img,xpos,ypos,width,height,scaleX,scaleY){
this.img = img;
this.xpos = xpos;
this.ypos = ypos;
this.width = width;
this.height = height;
this.scaleX = scaleX;
this.scaleY = scaleY;
}
Entity.prototype.draw = function(){
ctxEntities.drawImage(this.img,0,0,this.width,this.height,this.xpos,this.ypos,this.scaleX,this.scaleY);
};
// end of entity class
// input handling
function keyDown(e){
var keyID = (e.keyCode) ? e.keyCode : e.which;
if(keyID == 38 || keyID == 87){ //w
e.preventDefault();
hero.isUpKey = true;
}
if(keyID == 37 || keyID == 65){ //a
e.preventDefault();
hero.isLeftKey = true;
}
if(keyID == 40 || keyID == 83){ //s
e.preventDefault();
hero.isDownKey = true;
}
if(keyID == 39 || keyID == 68){ //d
e.preventDefault();
hero.isRightKey = true;
}
}
function keyUp(e){
var keyID = (e.keyCode) ? e.keyCode : e.which;
if(keyID == 38 || keyID == 87){
hero.isUpKey = false;
}
if(keyID == 37 || keyID == 65){
hero.isLeftKey = false;
}
if(keyID == 40 || keyID == 83){
hero.isDownKey = false;
}
if(keyID == 39 || keyID == 68){
hero.isRightKey = false;
}
}
// end of input handling
UPDATE 私の問題の半分はmarkEによって修正されました。私が現在抱えている唯一の問題は、entitiesCtx が画像/長方形を描画できる唯一のコンテキストであることです。他のctxは何も描画できません。コードを更新しました。
