A pixel art painter geared specifically at NES pixel art. Includes export for .chr binary file as well as palette and namespace data.
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

136 行
3.3KB

  1. import ISurface from "/app/js/ifaces/ISurface.js";
  2. import NESPalette from "/app/js/models/NESPalette.js";
  3. function clear(ctx, color, cw, ch){
  4. if (typeof(cw) !== 'number'){
  5. cw = (Math.floor(ctx.canvas.clientWidth) > 0) ?
  6. Math.floor(ctx.canvas.clientWidth) :
  7. Math.floor(ctx.canvas.width);
  8. }
  9. if (typeof(ch) !== 'number'){
  10. ch = (Math.floor(ctx.canvas.clientHeight) > 0) ?
  11. Math.floor(ctx.canvas.clientHeight) :
  12. Math.floor(ctx.canvas.height);
  13. }
  14. ctx.save();
  15. ctx.fillStyle = color;
  16. ctx.fillRect(0, 0, cw, ch);
  17. ctx.restore();
  18. }
  19. function render(surf, sx, sy, sw, sh, scale, ctx, dx, dy, palcolored){
  20. if (!(surf instanceof ISurface)){
  21. console.log("WARNING: Cannot render non-ISurface object.");
  22. return;
  23. }
  24. if (sx + sw > surf.width || sy + sh > surf.height){
  25. console.log("WARNING: Cannot render. Region is out of bounds.");
  26. return;
  27. }
  28. palcolored = (palcolored === true);
  29. var cw = (Math.floor(ctx.canvas.clientWidth) > 0) ?
  30. Math.floor(ctx.canvas.clientWidth) :
  31. Math.floor(ctx.canvas.width);
  32. var ch = (Math.floor(ctx.canvas.clientHeight) > 0) ?
  33. Math.floor(ctx.canvas.clientHeight) :
  34. Math.floor(ctx.canvas.height);
  35. if (cw <= 0 || ch <= 0){return;}
  36. clear(ctx, NESPalette.Default[4]);
  37. ctx.save();
  38. var ctximg = ctx.getImageData(0, 0, cw, ch);
  39. var idat = ctximg.data;
  40. var PutPixel = (i,j,s,c) => {
  41. i = Math.round(i);
  42. j = Math.round(j);
  43. s = Math.ceil(s);
  44. var r = parseInt(c.substring(1, 3), 16);
  45. var g = parseInt(c.substring(3, 5), 16);
  46. var b = parseInt(c.substring(5, 7), 16);
  47. for (var y=j; y < j+s; y++){
  48. for (var x=i; x < i+s; x++){
  49. if (x >= 0 && x < cw && y >= 0 && y < ch){
  50. var index = (y*cw*4) + (x*4);
  51. idat[index] = r;
  52. idat[index+1] = g;
  53. idat[index+2] = b;
  54. idat[index+3] = 255;
  55. }
  56. }
  57. }
  58. };
  59. for (let j=sy; j < sy + sh; j++){
  60. var y = (j*scale) + dy;
  61. for (let i=sx; i < sx + sw; i++){
  62. var x = (i*scale) + dx;
  63. if (x >= 0 && x < cw && y >= 0 && y < ch){
  64. var color = NESPalette.Default[4];
  65. if (palcolored){
  66. color = surf.getColor(i, j);
  67. } else {
  68. var pinfo = surf.getColorIndex(i, j);
  69. color = (pinfo.ci >= 0) ? NESPalette.Default[pinfo.ci] : NESPalette.Default[4];
  70. }
  71. PutPixel(x,y,scale,color);
  72. }
  73. }
  74. }
  75. ctx.putImageData(ctximg, 0, 0);
  76. ctx.restore();
  77. }
  78. function renderToFit(surf, ctx, palcolored){
  79. if (!(surf instanceof ISurface)){
  80. console.log("WARNING: Cannot render non-ISurface object.");
  81. return;
  82. }
  83. palcolored = (palcolored === true);
  84. var cw = (Math.floor(ctx.canvas.clientWidth) > 0) ?
  85. Math.floor(ctx.canvas.clientWidth) :
  86. Math.floor(ctx.canvas.width);
  87. var ch = (Math.floor(ctx.canvas.clientHeight) > 0) ?
  88. Math.floor(ctx.canvas.clientHeight) :
  89. Math.floor(ctx.canvas.height);
  90. if (cw <= 0 || ch <= 0){return;}
  91. var scale = Math.min(
  92. cw/surf.width,
  93. ch/surf.height
  94. );
  95. var offX = Math.floor((cw - (surf.width*scale)) * 0.5);
  96. var offY = Math.floor((ch - (surf.height*scale)) * 0.5);
  97. render(surf, 0, 0, surf.width, surf.height, scale, ctx, offX, offY, palcolored);
  98. }
  99. export default {
  100. clear: clear,
  101. render: render,
  102. renderToFit: renderToFit
  103. };