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个字符

127 行
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);