A pixel art painter geared specifically at NES pixel art. Includes export for .chr binary file as well as palette and namespace data.
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

136 líneas
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. };