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文字以内のものにしてください。

560 行
15KB

  1. import Utils from "/app/js/common/Utils.js";
  2. import ISurface from "/app/js/ifaces/ISurface.js";
  3. import NESTile from "/app/js/models/NESTile.js";
  4. import NESPalette from "/app/js/models/NESPalette.js";
  5. function CnvIdx(x, y, am, off){
  6. var res = {
  7. side: 0,
  8. tileidx: 0,
  9. x: 0,
  10. y: 0
  11. }
  12. switch(am){
  13. case NESBank.ACCESSMODE_8K:
  14. res.side = (x >= 128) ? 1 : 0;
  15. x -= (res.side === 1) ? 128 : 0;
  16. res.tileidx = (Math.floor(y/8) * 16) + Math.floor(x / 8);
  17. break;
  18. case NESBank.ACCESSMODE_4K:
  19. res.side = off;
  20. res.tileidx = (Math.floor(y/8) * 16) + Math.floor(x / 8);
  21. break;
  22. case NESBank.ACCESSMODE_2K:
  23. res.side = Math.floor(off * 0.5);
  24. res.tileidx = (res.side*32) + ((Math.floor(y/8) * 16) + Math.floor(x / 8));
  25. break;
  26. case NESBank.ACCESSMODE_1K:
  27. res.side = Math.floor(off * 0.25);
  28. off -= (off > 3) ? 4 : 0;
  29. res.tileidx = (off * 16) + ((Math.floor(y/8) * 16) + Math.floor(x / 8));
  30. break;
  31. }
  32. res.x = x%8;
  33. res.y = y%8;
  34. return res;
  35. }
  36. function LRIdx2TileIdxCo(index, lid){
  37. if (isNaN(lid) || lid < 0 || lid > 2){
  38. lid = 2;
  39. }
  40. var res = {
  41. lid: 0,
  42. index: 0,
  43. x: 0,
  44. y: 0
  45. };
  46. var w = (lid == 2) ? 256 : 128;
  47. var x = Math.floor(index % w);
  48. var y = Math.floor(index / w);
  49. if (x < 128){
  50. res.index = (Math.floor(y/8) * 16) + Math.floor(x / 8);
  51. if (lid !== 2)
  52. res.lid = lid;
  53. } else {
  54. res.index = (Math.floor(y/8) * 16) + Math.floor((x - 128) / 8);
  55. res.lid = 1;
  56. }
  57. res.x = x % 8;
  58. res.y = y % 8;
  59. return res;
  60. }
  61. export default class NESBank extends ISurface{
  62. constructor(){
  63. super();
  64. this.__LP = []; // Left Patterns (Sprites)
  65. this.__RP = []; // Right Patterns (Backgrounds)
  66. this.__View = [];
  67. this.__AccessMode = NESBank.ACCESSMODE_8K;
  68. this.__AccessOffset = 0;
  69. this.__emitsEnabled = true;
  70. var handle_datachanged = Utils.debounce((function(side, idx){
  71. var sendEmit = false;
  72. switch(this.__AccessMode){
  73. case NESBank.ACCESSMODE_1K:
  74. if (side === Math.floor(this.__AccessOffset / 4)){
  75. if (Math.floor(idx / 64) === Math.floor(this.__AccessOffset/4))
  76. sendEmit = true;
  77. }
  78. break;
  79. case NESBank.ACCESSMODE_2K:
  80. if (side === Math.floor(this.__AccessOffset / 2)){
  81. if (Math.floor(idx / 128) === Math.floor(this.__AccessOffset/2))
  82. sendEmit = true;
  83. }
  84. break;
  85. case NESBank.ACCESSMODE_4K:
  86. if (side === this.__AccessOffset)
  87. sendEmit = true;
  88. break;
  89. case NESBank.ACCESSMODE_8K:
  90. sendEmit = true;
  91. }
  92. if (sendEmit && this.__emitsEnabled){
  93. this.emit("data_changed");
  94. }
  95. }).bind(this), 250);
  96. for (var i=0; i < 256; i++){
  97. this.__LP.push(new NESTile());
  98. this.__LP[i].listen("data_changed", handle_datachanged.bind(this, 0, i));
  99. this.__RP.push(new NESTile());
  100. this.__RP[i].listen("data_changed", handle_datachanged.bind(this, 1, i));
  101. }
  102. this.__palette = null;
  103. }
  104. get access_mode(){return this.__AccessMode;}
  105. set access_mode(m){
  106. if (!Utils.isInt(m))
  107. throw new TypeError("Access mode expected to be integer.");
  108. switch(m){
  109. case NESBank.ACCESSMODE_8K:
  110. this.__AccessMode = NESBank.ACCESSMODE_8K;
  111. this.__AccessOffset = 0;
  112. break;
  113. case NESBank.ACCESSMODE_4K:
  114. if (this.__AccessOffset > 1){
  115. switch(this.__AccessMode){
  116. case NESBank.ACCESSMODE_2K:
  117. this.__AccessOffset = Math.floor(this.__AccessOffset * 0.5);
  118. break;
  119. case NESBank.ACCESSMODE_1K:
  120. this.__AccessOffset = Math.floor(this.__AccessOffset * 0.25);
  121. break;
  122. }
  123. }
  124. this.__AccessMode = NESBank.ACCESSMODE_4K
  125. break;
  126. case NESBank.ACCESSMODE_2K:
  127. switch(this.__AccessMode){
  128. case NESBank.ACCESSMODE_8K:
  129. this.__AccessOffset = 0;
  130. break;
  131. case NESBank.ACCESSMODE_4K:
  132. this.__AccessOffset *= 2;
  133. break;
  134. case NESBank.ACCESSMODE_1K:
  135. this.__AccessOffset = Math.floor(this.__AccessOffset * 0.5);
  136. break;
  137. }
  138. this.__AccessMode = NESBank.ACCESSMODE_2K;
  139. break;
  140. case NESBank.ACCESSMODE_1K:
  141. switch(this.__AccessMode){
  142. case NESBank.ACCESSMODE_8K:
  143. this.__AccessOffset = 0;
  144. break;
  145. case NESBank.ACCESSMODE_4K:
  146. this.__AccessOffset *= 4;
  147. break;
  148. case NESBank.ACCESSMODE_2K:
  149. this.__AccessOffset *= 2;
  150. break;
  151. }
  152. this.__AccessMode = NESBank.ACCESSMODE_1K;
  153. break;
  154. default:
  155. throw new ValueError("Unknown Access Mode.");
  156. }
  157. if (this.__emitsEnabled)
  158. this.emit("data_changed");
  159. }
  160. get access_offset(){return this.__AccessOffset;}
  161. set access_offset(o){
  162. if (!Utils.isInt(m))
  163. throw new TypeError("Access offset expected to be integer.");
  164. switch (this.__AccessMode){
  165. case NESBank.ACCESSMODE_8K:
  166. if (o !== 0)
  167. throw new RangeError("Access Offset is out of bounds based on current Access Mode.");
  168. break;
  169. case NESBank.ACCESSMODE_4K:
  170. if (o !== 0 && o !== 1)
  171. throw new RangeError("Access Offset is out of bounds based on current Access Mode.");
  172. break;
  173. case NESBank.ACCESSMODE_2K:
  174. if (o < 0 || o >= 4)
  175. throw new RangeError("Access Offset is out of bounds based on current Access Mode.");
  176. break;
  177. case NESBank.ACCESSMODE_1K:
  178. if (o < 0 || o >= 8)
  179. throw new RangeError("Access Offset is out of bounds based on current Access Mode.");
  180. break;
  181. }
  182. this.__AccessOffset = m;
  183. if (this.__emitsEnabled)
  184. this.emit("data_changed");
  185. }
  186. get json(){
  187. JSON.stringify({
  188. LP: this.__LP.map(x=>x.base64),
  189. RP: this.__RP.map(x=>x.base64)
  190. });
  191. }
  192. get chr(){
  193. var buff = null;
  194. var offset = 0;
  195. switch (this.__AccessMode){
  196. case NESBank.ACCESSMODE_8K:
  197. buff = new Uint8Array(8192);
  198. this.__LP.forEach((i) => {
  199. buff.set(i.chr, offset);
  200. offset += 16;
  201. });
  202. this.__RP.forEach((i) => {
  203. buff.set(i.chr, offset);
  204. offset += 16;
  205. });
  206. break;
  207. case NESBank.ACCESSMODE_4K:
  208. buff = new Uint8Array(4096);
  209. var list = (this.__AccessOffset === 0) ? this.__LP : this.__RP;
  210. list.forEach((i) => {
  211. buff.set(i.chr, offset);
  212. offset += 16;
  213. });
  214. break;
  215. case NESBank.ACCESSMODE_2K:
  216. buff = new Uint8Array(2048);
  217. var list = (this.__AccessOffset < 2) ? this.__LP : this.__RP;
  218. var s = Math.floor(this.__AccessOffset * 0.5) * 128;
  219. var e = s + 128;
  220. for (let i=s; i < e; i++){
  221. buff.set(list[i].chr, offset);
  222. offset += 16;
  223. }
  224. break;
  225. case NESBank.ACCESSMODE_1K:
  226. buff = new Uint8Array(1024);
  227. var list = (this.__AccessOffset < 4) ? this.__LP : this.__RP;
  228. var s = Math.floor(this.__AccessOffset * 0.25) * 64;
  229. var e = s + 64;
  230. for (let i=s; i < e; i++){
  231. buff.set(list[i].chr, offset);
  232. offset += 16;
  233. }
  234. break;
  235. }
  236. return buff;
  237. }
  238. /*set chr(buff){
  239. if (!(buff instanceof Uint8Array))
  240. throw new TypeError("Expected Uint8Array buffer.");
  241. if (buff.length !== 8192)
  242. throw new RangeError("Data buffer has invalid byte length.");
  243. var offset = 0;
  244. this.__LP.forEach((i) => {
  245. i.chr = buff.slice(offset, offset+15);
  246. offset += 16;
  247. });
  248. this.__RP.forEach((i) => {
  249. i.chr = buff.slice(offset, offset+15);
  250. offset += 16;
  251. });
  252. }*/
  253. get base64(){
  254. var b = "";
  255. var data = this.chr;
  256. for (var i = 0; i < data.length; i++) {
  257. b += String.fromCharCode(data[i]);
  258. }
  259. return window.btoa(b);
  260. }
  261. set base64(s){
  262. var b = window.atob(s);
  263. var len = b.length;
  264. if (b.length !== 8192){
  265. throw new Error("Base64 string contains invalid byte count.");
  266. }
  267. this.chr = b;
  268. }
  269. get palette(){return this.__palette;}
  270. set palette(p){
  271. if (p !== null && !(p instanceof NESPalette))
  272. throw new TypeError("Expected null or NESPalette object.");
  273. if (p !== this.__palette){
  274. this.__palette = p;
  275. }
  276. }
  277. get width(){return (this.__AccessMode == NESBank.ACCESSMODE_8K) ? 256 : 128;}
  278. get height(){
  279. switch(this.__AccessMode){
  280. case NESBank.ACCESSMODE_2K:
  281. return 64;
  282. case NESBank.ACCESSMODE_1K:
  283. return 32;
  284. }
  285. return 128;
  286. }
  287. get length(){return this.width * this.height;}
  288. get coloridx(){
  289. return new Proxy(this, {
  290. get:function(obj, prop){
  291. var len = obj.length * 8;
  292. if (prop === "length")
  293. return len;
  294. if (!Utils.isInt(prop))
  295. throw new TypeError("Expected integer index.");
  296. prop = parseInt(prop);
  297. if (prop < 0 || prop >= len)
  298. return NESPalette.Default[4];
  299. var x = Math.floor(prop % this.width);
  300. var y = Math.floor(prop / this.width);
  301. var res = CnvIdx(x, y, this.__AccessMode, this.__AccessOffset);
  302. var list = (res.side === 0) ? obj.__LP : obj.__RP;
  303. return list[res.tileidx].getPixelIndex(res.x, res.y);
  304. },
  305. set:function(obj, prop, value){
  306. if (!Utils.isInt(prop))
  307. throw new TypeError("Expected integer index.");
  308. if (!Utils.isInt(value))
  309. throw new TypeError("Color expected to be integer.");
  310. prop = parseInt(prop);
  311. value = parseInt(value);
  312. if (prop < 0 || prop >= len)
  313. throw new RangeError("Index out of bounds.");
  314. if (value < 0 || value >= 4)
  315. throw new RangeError("Color index out of bounds.");
  316. var x = Math.floor(prop % this.width);
  317. var y = Math.floor(prop / this.width);
  318. var res = CnvIdx(x, y, this.__AccessMode, this.__AccessOffset);
  319. var list = (res.side === 0) ? obj.__LP : obj.__RP;
  320. list[res.tileidx].setPixelIndex(res.x, res.y, value);
  321. return true;
  322. }
  323. });
  324. }
  325. get lp(){
  326. return new Proxy(this, {
  327. get: function(obj, prop){
  328. if (prop === "length")
  329. return obj.__LP.length;
  330. if (!Utils.isInt(prop))
  331. throw new TypeError("Expected integer index.");
  332. prop = parseInt(prop);
  333. if (prop < 0 || prop >= 256)
  334. throw new RangeError("Index out of bounds.");
  335. return obj.__LP[prop];
  336. },
  337. set: function(obj, prop, value){
  338. if (!Utils.isInt(prop))
  339. throw new TypeError("Expected integer index.");
  340. if (!(value instanceof NESTile))
  341. throw new TypeError("Can only assign NESTile objects.");
  342. prop = parseInt(prop);
  343. if (prop < 0 || prop >= 256)
  344. throw new RangeError("Index out of bounds.");
  345. obj.__LP[prop].copy(value);
  346. return true;
  347. }
  348. });
  349. }
  350. get rp(){
  351. return new Proxy(this, {
  352. get: function(obj, prop){
  353. if (prop === "length")
  354. return obj.__RP.length;
  355. if (!Utils.isInt(prop))
  356. throw new TypeError("Expected integer index.");
  357. prop = parseInt(prop);
  358. if (prop < 0 || prop >= 256)
  359. throw new RangeError("Index out of bounds.");
  360. return obj.__RP[prop];
  361. },
  362. set: function(obj, prop, value){
  363. if (!Utils.isInt(prop))
  364. throw new TypeError("Expected integer index.");
  365. if (!(value instanceof NESTile))
  366. throw new TypeError("Can only assign NESTile objects.");
  367. prop = parseInt(prop);
  368. if (prop < 0 || prop >= 256)
  369. throw new RangeError("Index out of bounds.");
  370. obj.__RP[prop].copy(value);
  371. return true;
  372. }
  373. });
  374. }
  375. copy(b){
  376. if (!(b instanceof NESBank))
  377. throw new TypeError("Expected NESBank object.");
  378. for (var i=0; i < 256; i++){
  379. this.lp[i] = b.lp[i];
  380. this.rp[i] = b.rp[i];
  381. }
  382. return this;
  383. }
  384. clone(){
  385. return (new NESBank()).copy(this);
  386. }
  387. getCHR(mode, offset){
  388. this.__emitsEnabled = false;
  389. var oam = this.access_mode;
  390. var oao = this.access_offset;
  391. try{
  392. this.access_mode = mode;
  393. this.access_offset = offset;
  394. } catch (e){
  395. this.access_mode = oam;
  396. this.access_offset = oao;
  397. this.__emitsEnabled = true;
  398. throw e;
  399. }
  400. var chr = this.chr;
  401. this.access_mode = oam;
  402. this.access_offset = oao;
  403. this.__emitsEnabled = true;
  404. return chr;
  405. }
  406. setCHR(buff, offset){
  407. if (!Utils.isInt(offset) || offset < 0)
  408. offset = 0;
  409. var idx = 0;
  410. switch(buff.length){
  411. case 8192:
  412. this.__LP.forEach((i) => {
  413. i.chr = buff.slice(idx, idx+15);
  414. idx += 16;
  415. });
  416. this.__RP.forEach((i) => {
  417. i.chr = buff.slice(idx, idx+15);
  418. idx += 16;
  419. });
  420. break;
  421. case 4096:
  422. if (offset >= 2)
  423. throw new RangeError("Offset mismatch based on Buffer length.");
  424. var list = (offset === 0) ? this.__LP : this.__RP;
  425. list.forEach((i) => {
  426. i.chr = buff.slice(idx, idx+15);
  427. idx += 16;
  428. });
  429. break;
  430. case 2048:
  431. if (offset >= 4)
  432. throw new RangeError("Offset mismatch based on Buffer length.");
  433. var list = (offset < 2) ? this.__LP : this.__RP;
  434. var s = Math.floor(offset * 0.5) * 128;
  435. var e = s + 128;
  436. for (let i=s; i < e; i++){
  437. list[i].chr = buff.slice(idx, idx+15);
  438. idx += 16;
  439. }
  440. break;
  441. case 1024:
  442. if (offset >= 8)
  443. throw new RangeError("Offset mismatch based on Buffer length.");
  444. var list = (offset < 4) ? this.__LP : this.__RP;
  445. var s = Math.floor(this.__AccessOffset * 0.25) * 64;
  446. var e = s + 64;
  447. for (let i=s; i < e; i++){
  448. list[i].chr = buff.slice(idx, idx+15);
  449. idx += 16;
  450. }
  451. break;
  452. default:
  453. throw new RangeError("Buffer length does not match any of the supported bank sizes.");
  454. }
  455. return this;
  456. }
  457. getColor(x,y){
  458. if (x < 0 || x >= this.width || y < 0 || y >= this.height)
  459. return this.__default_pi[4];
  460. var res = CnvIdx(x, y, this.__AccessMode, this.__AccessOffset);
  461. var list = (res.side === 0) ? this.__LP : this.__RP;
  462. var pi = list[res.tileidx].paletteIndex + ((res.side === 0) ? 4 : 0);
  463. var ci = list[res.tileidx].getPixelIndex(res.x, res.y);
  464. if (this.__palette !== null){
  465. return this.__palette.get_palette_color(pi, ci);
  466. }
  467. return NESPalette.Default[ci];
  468. }
  469. getColorIndex(x, y){
  470. if (x < 0 || x >= this.width || y < 0 || y >= this.height)
  471. return {pi: -1, ci:-1};
  472. var res = CnvIdx(x, y, this.__AccessMode, this.__AccessOffset);
  473. var list = (res.side === 0) ? this.__LP : this.__RP;
  474. return {
  475. pi: list[res.tileidx].paletteIndex,
  476. ci: list[res.tileidx].getPixelIndex(res.x, res.y)
  477. };
  478. }
  479. setColorIndex(x, y, ci, pi){
  480. if (x < 0 || x >= this.width || y < 0 || y > this.height)
  481. throw new RangeError("Coordinates out of bounds.");
  482. if (!Utils.isInt(pi))
  483. pi = -1;
  484. if (!Utils.isInt(ci))
  485. ci = 0;
  486. if (pi < 0){
  487. this.coloridx[(y*this.width)+x] = ci;
  488. } else {
  489. var res = CnvIdx(x, y, this.__AccessMode, this.__AccessOffset);
  490. var list = (res.side === 0) ? this.__LP : this.__RP;
  491. list[res.tileidx].paletteIndex = pi;
  492. list[res.tileidx].setPixelIndex(res.x, res.y, ci);
  493. }
  494. return this;
  495. }
  496. }
  497. NESBank.ACCESSMODE_8K = 0;
  498. NESBank.ACCESSMODE_1K = 1;
  499. NESBank.ACCESSMODE_2K = 2;
  500. NESBank.ACCESSMODE_4K = 3;