Spritemate是Commodore 64的新精靈編輯器。它可以與Windows,Mac和Linux上的大多數現代瀏覽器一起使用,並且是純JavaScript和HTML-無插件。所有數據僅在客戶端處理。 Spritemate支持Commodore 64(例如SpritePad)最常見的文件格式的導入和導出,並且幾乎可以用作瀏覽器的任何設備上的查看器和編輯器。
Spritemate仍在開發中。如果您喜歡的話,請告訴我;)隨時提交拉動請求或提交問題部分中的想法,錯誤和請求。乾杯!
最新穩定版本:https://spritemate.com/
Beta版本:https://beta.spritemate.com/
較早版本的視頻:https://www.youtube.com/watch?v=n59axaeqdwe

使用npm
$ npm install
$ npm run dev
| 象徵 | 捷徑 | 功能 |
|---|---|---|
![]() | - | 加載文件。 支持格式:Spritemate(SPM),SpritePad(SPD,SPR) |
![]() | - | 保存文件。 支持格式:Spritemate(SPM),SpritePad 2.0和1.8.1(SPD),ASM源(TXT) |
![]() | z | 撤消。因為當你搞砸了。 |
![]() | Shift + Z | 重做。因為當您意識到這還不錯 |
![]() | d | 繪製像素 |
![]() | f | 洪水填充 |
![]() | e | 橡皮 |
![]() | m | 移動 |
| 象徵 | 捷徑 | 功能 |
|---|---|---|
![]() | m | 在SingleColor和多色模式之間切換 |
![]() | - | 向左移動精靈 |
![]() | - | 向右移動精靈 |
![]() | - | 移動精靈 |
![]() | - | 將精靈轉移 |
![]() | - | 翻轉精靈水平 |
![]() | - | 翻轉精靈垂直 |
![]() | - | 打開/關格顯示網格顯示 |
![]() ![]() | - | 縮放窗口進出 |
| 1,2,3,4 | 選擇單個顏色,透明,多色1或多色2 | |
| Shift +鼠標 | 刪除像素 |
| 象徵 | 捷徑 | 功能 |
|---|---|---|
![]() | - | 水平伸展精靈 |
![]() | - | 垂直拉伸精靈 |
![]() | - | 覆蓋下一個精靈 |
![]() ![]() | - | 縮放窗口進出 |
| 象徵 | 捷徑 | 功能 |
|---|---|---|
![]() | - | 創建新的精靈 |
![]() | - | 刪除選定的精靈 |
![]() | - | 複製精靈 |
![]() | - | 糊狀精靈 |
![]() | - | 打開/關格顯示網格顯示 |
![]() ![]() | - | 縮放窗口進出 |
| 光標左右與右 | 循環穿過精靈列表 |
最初,我想從該項目中刪除jQuery和jQuery UI,並用Vanilla JS替換它。建立時間已經增長到10秒,我發現這很煩人。複製jQuery的模態功能比預期的更具挑戰性,因此我決定再次將jQuery排除在JS捆綁中,然後將其從CDN中加載。這將編譯時間大大減少到4秒以下。總體而言,該應用程序仍然非常小,主要的應用程序代碼約為20KB,jQuery約為98KB。
請注意,Sprite命名功能引入了兩個更改:Sprite以索引號為0而不是1開始,例如第一個精靈稱為“ Sprite_0”而不是“ Sprite_1”。這是始終性和我的個人理智所必需的 - 內部索引號總是為0而不是1。另一個更改是,將其導出為ASM或基本文件的Sprite數據不會再通過增加索引來標記Sprites。這意味著,無論您是否將其在精靈列表中排序到另一個位置(這似乎很明顯,但以前不是這樣),Sprite都會保留其名稱。
Sprite命名功能是向後兼容的,因此,當您加載舊的SPM文件時,將應用默認名稱。
在多色模式下,Sprite Anvert(或SpritePad中的“負”)看起來有些奇怪,但這不是錯誤。在SingleColor中,一個0(透明)被1(像素)代替,反之亦然,但在多色中,我們還有另外兩種顏色。在這種情況下,Spritemate會像SpritePad一樣開關顏色3和4。
使用多個文件時,這可能會有所幫助。如果文件尚未保存,也是一個很好的指標。請注意,由於瀏覽器如何保存文件和操作系統處理安全性的性質,如果在下載位置中已經存在相同的文件名(例如“ mysprites(1).spm”而不是“ mysprites.spm”),則文件可能會稍有不同的名稱保存。
菜單欄似乎確實為某些設置故障,但是目前的問題是不可再現的。 THX2到Leissa進行其他測試,並發現Firefox中關閉“內容阻止”可能會解決該問題。如果您在菜單欄上遇到可再現的問題,請在此處報告說明:https://github.com/esshahn/spritemate/issues
該版本的重點是更好的用光。儘管從技術上講沒有添加功能,但現在的整體工作流程應該更好。例如,新的移動工具不再擁有四個不同的圖標來向上,向下,左或右移動精靈,而是讓您現在更直觀。作為副作用,較少的圖標使UI複雜化。
擦除像素的選項以前已經在Spritemate中(通過在繪圖時按住“ Shift”),但是現在“橡皮擦”工具使其更明顯,更易於在單手工作流程中使用。
已經引入了一個新的複制精靈的選項。以前通過“複製”,“新”和“糊狀”(實際上是新的副本)的組合可以實現這一點,但這應該增加更直觀的體驗。
還有其他改進,例如視覺上更可區分的“垃圾”圖標來刪除精靈。如果您習慣了Photoshop(例如Photoshop),那麼所有合併後的Spritemate應該開始感到更加熟悉。
儘管添加了很多功能,但我花了很長時間才完成此版本。我不得不將很多我無法可靠地工作的非常酷的新功能恢復了很多代碼。因此,我必須將兩個代碼分支和Backport功能維護到穩定版本中。我終於決定將新功能擱置並專注於其他功能。
由於我的商業東西吸收了我所有的空閒時間,我幾個月來沒有機會在Spritemate上工作。另外,反饋最近也停止了,這也沒有激勵我太多。最終,我檢查了Spritemate的流量,並對用戶穩定的數量感到驚訝。因此,我決定再次將更多時間用於這個項目。無論如何,如果您喜歡Spritemate,則可以通過Mail(INGO在AWSM dot de)或給我發送推文( @AWSM9000)來使我有所不同。讓我知道我如何使您改善您!
Spritemate現在在本地保存設置。它可能仍然有些奇怪,我至少知道該代碼有效但不應該對我的理解(但是我是誰評判開發人員...)的情況。無論如何,為將來的更新奠定了更多配置選項的基礎。
Spritemate現在在公共Beta中。感謝所有幫助找到錯誤並提出功能和改進的Beta測試人員。請查看Github上的文檔以獲取功能概述。
最常見的動作已接收到熱鍵以快速訪問。在瀏覽器中使用Hotkeys總是有點棘手,因為瀏覽器採用了許多組合(例如“複製”的CMD/CTRL + C)。因此,一些快捷方式似乎不太直觀。這些功能現在可以通過按鍵立即獲得:
(1,2,3,4) - 設置四個可用的筆/顏色(F)之一 - 切換全屏打開/OFF(D) - 在“ draw”和“ fill”模式(z) - dusto,(shift + z)= redo(m) - toggle singlecolor/multicolor/multicolor(Cursor左,左,右) -
預覽窗口中的切換精靈疊加層。以下精靈將用作疊加層。預覽窗口顯示了精靈,編輯窗口顯示了另一個精靈的可見度(例如洋蔥皮)。請注意,當前Sprite覆蓋信息僅以本機施加格式存儲。