A pixel art painter geared specifically at NES pixel art. Includes export for .chr binary file as well as palette and namespace data.
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

127 rindas
3.7KB

  1. import GlobalEvents from "/app/js/common/EventCaller.js";
  2. import EmitterElements from "/app/js/ui/Emitters.js";
  3. import Input from "/app/js/ui/Input.js";
  4. import Modal from "/app/js/ui/Modal.js";
  5. import CTRLPalettes from "/app/js/ctrls/CTRLPalettes.js";
  6. import CTRLPainter from "/app/js/ctrls/CTRLPainter.js";
  7. import NESPalette from "/app/js/models/NESPalette.js";
  8. import NESTile from "/app/js/models/NESTile.js";
  9. import NESBank from "/app/js/models/NESBank.js";
  10. /*function on_palette_changed(e){
  11. if (e.type == "ALL"){
  12. console.log("ALL");
  13. } else if (e.type == "TILE"){
  14. console.log("TILE Palette:", e.pindex, " | Color:", e.cindex);
  15. } else if (e.type == "SPRITE"){
  16. console.log("SPRITE Palette:", e.pindex, " | Color:", e.cindex);
  17. }
  18. }
  19. function handle_emitted(){
  20. console.log("EMITTED EVENT!");
  21. }
  22. function handle_keyevent(e){
  23. console.log(e);
  24. }
  25. function handle_mouseevent(e){
  26. console.log(e);
  27. }
  28. function handle_mouseclickevent(e){
  29. console.log("MOUSE CLICK ON BUTTON: ", e.button);
  30. }*/
  31. function TitlePainter(pal){
  32. var elist = document.querySelectorAll(".color-NES-random");
  33. if (elist){
  34. elist.forEach(function(el){
  35. var ca = Math.floor(Math.random() * 11) + 1;
  36. var cb = Math.floor(Math.random() * 3);
  37. var index = (cb*16)+ca;
  38. el.style.color = pal[index];
  39. el.style["background-color"] = "#000";
  40. });
  41. }
  42. }
  43. function initialize(DOC){
  44. TitlePainter(NESPalette.SystemColor);
  45. EmitterElements.initialize();
  46. //GlobalEvents.listen("emitted-event", handle_emitted);
  47. //var nespainter = new NESPainter(DOC.getElementById("painter"));
  48. CTRLPainter.initialize();
  49. var palette = new NESPalette();
  50. // TODO: This is just test code. I should remove this.
  51. //palette.listen("palettes_changed", on_palette_changed);
  52. // TODO: At least define a more useful set of palettes. As it is, these are just random.
  53. palette.set_palette([
  54. 44,
  55. 11,12,13,
  56. 54,23,43,
  57. 23,18,11,
  58. 4,8,60,
  59. 63,0,11,
  60. 0,15,14,
  61. 9,0,32,
  62. 5,10,20
  63. ]);
  64. console.log(palette.to_asm());
  65. GlobalEvents.emit("set_app_palette", palette);
  66. /*var input = new Input();
  67. input.preventDefaults = true;
  68. input.mouseTargetElement = document.getElementById("painter");
  69. input.listen("keydown", handle_keyevent);
  70. input.listen("keyup", handle_keyevent);
  71. input.listen("keypress", handle_keyevent);
  72. input.listen("mousemove", handle_mouseevent);
  73. input.listen("mousedown", handle_mouseevent);
  74. input.listen("mouseup", handle_mouseevent);
  75. input.listen("mouseclick", handle_mouseclickevent);*/
  76. // TODO: Drop all of this below test code... or put it in a dedicated test app.
  77. var TileA = new NESTile();
  78. var TileB = new NESTile();
  79. TileB.setPixelIndex(0,0,2);
  80. var TileC = TileB.clone().flip(1);
  81. var TileD = TileB.clone().flip(3);
  82. //var TileC = TileB.clone();
  83. //TileC.flip(1);
  84. for (var i=0; i < 64; i++){
  85. console.log(TileC.pixels[i]);
  86. }
  87. console.log("TileA does NOT match TileB: ", TileA.isEq(TileB) == -1);
  88. console.log("TileA does NOT match TileC: ", TileA.isEq(TileC) == -1);
  89. console.log("TileB DOES match TileC with Flag 1: ", TileB.isEq(TileC) == 1);
  90. console.log("TileB DOES match TileD with Flag 3: ", TileB.isEq(TileD) == 3);
  91. console.log(TileC);
  92. console.log(TileC.dataArray);
  93. console.log(TileC.pixels[7]);
  94. var bnk = new NESBank();
  95. bnk.lp[1] = TileB;
  96. bnk.lp[0] = TileC;
  97. bnk.rp[16] = TileD;
  98. console.log(bnk.chr);
  99. console.log("Bank color at coordinates (8,0): ", bnk.getColor(8,0));
  100. console.log("Bank color at coordinates (7,0): ", bnk.getColor(7,0));
  101. console.log("Bank color at coordinates (135, 15): ", bnk.getColor(135,15));
  102. bnk.access_mode = 0;
  103. GlobalEvents.emit("change_surface", bnk);
  104. }
  105. //console.log(document.getElementByID("painter"));
  106. initialize(document);