Use groundPattern as defaultGround

libs/control.js

@@ -76,15 +76,13 @@ control.prototype.setRequestAnimationFrame = function () {
                 }
 
                 if ((core.status.autotileAnimateObjs.blocks||[]).length>0) {
-                    var groundId = (core.status.maps||core.floors)[core.status.floorId].defaultGround || "ground";
-                    var blockIcon = core.material.icons.terrains[groundId];
                     core.status.autotileAnimateObjs.status++;
                     core.status.autotileAnimateObjs.blocks.forEach(function (block) {
                         var cv = core.isset(block.name)?core.canvas[block.name]:core.canvas.event;
                         cv.clearRect(block.x * 32, block.y * 32, 32, 32);
                         if (core.isset(block.name)) {
                             if (block.name == 'bg') {
-                                core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
+                                core.drawImage('bg', core.material.groundCanvas.canvas, block.x * 32, block.y * 32);
                             }
                             core.drawAutotile(cv, core.status.autotileAnimateObjs[block.name+"map"], block, 32, 0, 0, core.status.autotileAnimateObjs.status);
                         }

libs/core.js

@@ -333,11 +333,9 @@ core.prototype.init = function (coreData, callback) {
     core.flags.displayCritical = core.getLocalStorage('critical', core.flags.displayCritical);
     core.flags.displayExtraDamage = core.getLocalStorage('extraDamage', core.flags.displayExtraDamage);
 
-    core.material.ground = new Image();
+    core.material.groundCanvas = document.createElement('canvas').getContext('2d');
-    core.material.ground.onload = function () {
+    core.material.groundCanvas.canvas.width = core.material.groundCanvas.canvas.height = 32;
-        core.material.groundPattern = core.canvas.ui.createPattern(core.material.ground, "repeat");
+    core.material.groundPattern = core.material.groundCanvas.createPattern(core.material.groundCanvas.canvas, 'repeat');
-    }
-    core.material.ground.src = "project/images/ground.png";
 
     core.animateFrame.weather.fog = new Image();
     core.animateFrame.weather.fog.onerror = function () {

libs/maps.js

@@ -377,9 +377,7 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) {
     if (core.isset(block.name)) {
         core.canvas[block.name].clearRect(block.x * 32, block.y * 32, 32, 32);
         if (block.name == 'bg') {
-            var groundId = (core.status.maps||core.floors)[core.status.floorId].defaultGround || "ground";
+            core.drawImage('bg', core.material.groundCanvas.canvas, block.x * 32, block.y * 32);
-            var blockIcon = core.material.icons.terrains[groundId];
-            core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
         }
         core.canvas[block.name].drawImage(image, x * 32, y * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
         return;
@@ -477,18 +475,22 @@ maps.prototype.drawMap = function (floorId, callback) {
     }
     core.clearMap('all');
 
+    var groundId = (core.status.maps||core.floors)[floorId].defaultGround || "ground";
+    core.material.groundCanvas.clearRect(0, 0, 32, 32);
+    core.material.groundCanvas.drawImage(core.material.images.terrains, 0, 32*core.material.icons.terrains[groundId], 32, 32, 0, 0, 32, 32);
+    core.material.groundPattern = core.material.groundCanvas.createPattern(core.material.groundCanvas.canvas, 'repeat');
+
     var drawBg = function(){
         var width = core.floors[floorId].width || 13;
         var height = core.floors[floorId].height || 13;
 
-        var groundId = (core.status.maps||core.floors)[floorId].defaultGround || "ground";
-        var blockIcon = core.material.icons.terrains[groundId];
         for (var x = 0; x < width; x++) {
             for (var y = 0; y < height; y++) {
-                core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
+                core.drawImage('bg', core.material.groundCanvas.canvas, 32*x, 32*y);
             }
         }
 
+        // 获得image
         var images = [];
         if (core.isset(core.status.maps[floorId].images)) {
             images = core.status.maps[floorId].images;

libs/ui.js

@@ -54,6 +54,9 @@ ui.prototype.fillText = function (name, text, x, y, style, font) {
 
 ////// 在某个canvas上绘制粗体 //////
 ui.prototype.fillBoldText = function (canvas, text, style, x, y, font) {
+    if (typeof canvas == "string")
+        canvas = this.getContextByName(canvas);
+    if (!core.isset(canvas)) return;
     if (core.isset(font)) canvas.font = font;
     canvas.fillStyle = '#000000';
     canvas.fillText(text, x-1, y-1);
@@ -200,14 +203,17 @@ ui.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) {
     }
 
     // 只能接受2, 4, 8个参数
-    if (core.isset(x) && core.isset(y) && core.isset(w) && core.isset(h) && core.isset(x1) && core.isset(y1) && core.isset(w1) && core.isset(h1)) {
+    if (core.isset(x) && core.isset(y)) {
-        ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1);
+        if (core.isset(w) && core.isset(h)) {
-    }
+            if (core.isset(x1) && core.isset(y1) && core.isset(w1) && core.isset(h1)) {
-    else if (core.isset(x) && core.isset(y) && core.isset(w) && core.isset(h)) {
+                ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1);
-        ctx.drawImage(image, x, y, w, h);
+                return;
-    }
+            }
-    else if (core.isset(x) && core.isset(y)) {
+            ctx.drawImage(image, x, y, w, h);
+            return;
+        }
         ctx.drawImage(image, x, y);
+        return;
     }
 }
 
@@ -424,13 +430,12 @@ ui.prototype.drawWindowSkin = function(background,canvas,x,y,w,h,direction,px,py
 	// 仿RM窗口皮肤 ↓
     var dstImage = core.getContextByName(canvas);
     if (!dstImage) return;
-    var dx = 0, dy = 0;
     // 绘制背景
     dstImage.drawImage(background, 0, 0, 128, 128, x+2, y+2, w-4, h-4);
     // 绘制边框
     // 上方
     dstImage.drawImage(background, 128, 0,     16,     16,      x,      y,     16,     16);
-    for (dx = 0; dx < w - 64; dx += 32) {
+    for (var dx = 0; dx < w - 64; dx += 32) {
     dstImage.drawImage(background, 144, 0,     32,     16,x+dx+16,      y,     32,     16);
     dstImage.drawImage(background, 144,48,     32,     16,x+dx+16, y+h-16,     32,     16);
     }
@@ -438,7 +443,7 @@ ui.prototype.drawWindowSkin = function(background,canvas,x,y,w,h,direction,px,py
     dstImage.drawImage(background, 144,48,w-dx-32,     16,x+dx+16, y+h-16,w-dx-32,     16);
     dstImage.drawImage(background, 176, 0,     16,     16, x+w-16,      y,     16,     16);
     // 左右
-    for (dy = 0; dy < h - 64; dy += 32) {
+    for (var dy = 0; dy < h - 64; dy += 32) {
     dstImage.drawImage(background, 128,16,     16,     32,      x,y+dy+16,     16,     32);
     dstImage.drawImage(background, 176,16,     16,     32, x+w-16,y+dy+16,     16,     32);
     }
@@ -2499,16 +2504,37 @@ ui.prototype.drawKeyBoard = function () {
 
     core.clearLastEvent();
 
-    var left = 16, top = 48, right = 416 - 2 * left, bottom = 416 - 2 * top;
+    var left = 16, top = 48, width = 416 - 2 * left, height = 416 - 2 * top;
-    core.fillRect('ui', left, top, right, bottom, core.material.groundPattern);
+
-    core.strokeRect('ui', left - 1, top - 1, right + 1, bottom + 1, '#FFFFFF', 2);
+    var background = core.status.textAttribute.background;
+    var isWindowSkin = false;
+    if (typeof background == 'string') {
+        background = core.material.images.images[background];
+        if (core.isset(background) && background.width==192 && background.height==128) isWindowSkin = true;
+        else background = core.initStatus.textAttribute.background;
+    }
+    if (!isWindowSkin) background = core.arrayToRGBA(background);
+    var borderColor = core.status.globalAttribute.borderColor;
+    var titleColor = core.arrayToRGBA(core.status.textAttribute.title);
+    var textColor = core.arrayToRGBA(core.status.textAttribute.text);
+
+    core.clearMap('ui');
+    if (isWindowSkin) {
+        core.setAlpha('ui', 0.85);
+        this.drawWindowSkin(background,'ui',left,top,width,height);
+    }
+    else {
+        core.fillRect('ui', left, top, width, height, background);
+        core.strokeRect('ui', left - 1, top - 1, width + 1, height + 1, borderColor, 2);
+    }
+    core.setAlpha('ui', 1);
 
     core.setTextAlign('ui', 'center');
     var globalFont = core.status.globalAttribute.font;
-    core.fillText('ui', "虚拟键盘", 208, top+35, "#FFD700", "bold 22px "+globalFont);
+    core.fillText('ui', "虚拟键盘", 208, top+35, titleColor, "bold 22px "+globalFont);
 
     core.setFont('ui', '17px '+globalFont);
-    core.setFillStyle('ui', '#FFFFFF');
+    core.setFillStyle('ui', textColor);
     var offset = 128-9;
 
     var lines = [
@@ -2519,7 +2545,7 @@ ui.prototype.drawKeyBoard = function () {
         ["Z","X","C","V","B","N","M"],
         ["-","=","[","]","\\",";","'",",",".","/","`"],
         ["ES","TA","CA","SH","CT","AL","SP","BS","EN","DE"]
-    ]
+    ];
 
     lines.forEach(function (line) {
         for (var i=0;i<line.length;i++) {
@@ -2528,8 +2554,6 @@ ui.prototype.drawKeyBoard = function () {
         offset+=32;
     });
 
-    core.setTextAlign('ui', 'center');
-
     core.fillText("ui", "返回游戏", 416-80, offset-3, '#FFFFFF', 'bold 15px '+globalFont);
 }