A pixel art painter geared specifically at NES pixel art. Includes export for .chr binary file as well as palette and namespace data.
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

136 Zeilen
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. };