Re: [創作] DIY線上設計樣版編輯器

看板AnimalForest作者 (水)時間3年前 (2020/08/30 01:40), 3年前編輯推噓12(1201)
留言13則, 9人參與, 3年前最新討論串2/2 (看更多)
上週日晚上有位神秘人物來到我島上,向西施惠遞交了他設計的煙火 然後空中就出現了這樣的畫面... https://youtu.be/UjVCHoTLsSM
讓我突然想到~ 可以自訂圖樣的煙火...不正好最適合用來傳情告白了嗎!! 但現在編輯器只能把圖片匯入,到處找圖湊字實在太麻煩 自己用滑鼠慢慢的點,字也很難畫得漂亮 於是為了更有效把握北半球今年最後一次的煙火大會 立馬新增文字編輯輸入的功能! 編輯器傳送門 ( https://zack0711.github.io/pietro-brush/ ) ======新功能介紹分隔線====== 同色系色盤選取 1. 點擊想要的色系色盤按鈕。 2. 會把色盤前九個色塊更換為該色系的九個顏色。 https://i.imgur.com/MSTFiuL.jpg
新增多個空白編輯區塊 1. 在沒有匯入圖片的情況下仍可設定裁切的塊數,按下裁切後即可生成多個空白區塊。 2. 新產生每個的空白編輯區塊,其色盤會自動繼承前次正在使用的色盤 https://i.imgur.com/DZvIC9H.jpg
文字編輯輸入 1. 點選文字工具按鈕,會顯可以輸入的文字塊和編輯按鈕。 2. 按下編輯按鈕後可進行文字輸入及生成新的文字塊。 3. 在輸入框編輯想要新增的文字,可以另外調整文字大小及字型。 https://i.imgur.com/XYUgTdO.jpg
4. 除了系統字型另外提供五種字型可以選擇。 ◆ 瀨戶字體 ◆ 粉圓體 ◆ 青柳草書 ◆ 青柳隷書 ◆ 篆體( 給覺得正常文字傳情太害羞的人XD ) 5. 編輯好文字後,按下轉換點陣圖後會開始把新輸入的文字轉換成點陣文字圖。 ( 如果選了系統以外的字型轉換時間會較長。) 6. 要保留轉換好的文字圖片就直接按下確認,如要放棄編輯則點擊取消https://i.imgur.com/7XBKoT2.jpg
7. 回到主畫面後,即可點選新增的文字放到選取的設計圖樣上。 8. 擺放文字到畫面上時,程式會自動挑選選取色塊的鄰近的兩個色塊組成圖案, 建議可以先調整好色盤後再擺放文字效果會更好。 https://i.imgur.com/eSyAyF1.jpg
======新功能介紹結束分隔線====== 有任何建議或是遇到問題,一樣都歡迎在下面留言跟我說 一些手機上操作的問題正在想辦法解決中,目前還是在電腦上比較方便編輯 希望大家玩得盡興,傳情成功 (* ̄▽ ̄)/‧★*"`'*-.,_,.-*'`"*-.,_☆ ※ 引述《sPAlchemist (水)》之銘言: : 不知道大家有沒有試過把照片轉換成多塊樣版,下載到遊戲裡拼成一塊大圖 : 網路上有滿多工具都能把照片切割生成多個QR code,再利用NSO app下載到遊戲裡 : 可是因為這樣方式拿到的樣板,會被當作是別人的設計圖案無法在遊戲中編輯 : 所以拼起來的大圖片就都只會是方形的,沒辦法修掉邊角 : 雖然像是AC pattern可以對轉換的樣板進行編輯 : 但在多塊樣板的編輯上使用起來還頗麻煩的 : 於是決定發揮無人島上凡事DIY的精神,自己做一個線上樣版編輯器! : 在這邊分享給有同樣需求的島主們~ : 皮耶羅筆刷 - 動物之森設計樣版編輯器 : https://zack0711.github.io/pietro-brush/ : 之後還會陸續繼續添加一些新功能 : 大家如果有什麼想法的話(或是發現bug了XD),歡迎留言跟我說 : ============ 以下是簡易使用圖文說明 ============ : 主要介面 : ◆ 提供大部分「集合啦!動物森友會」內設計樣版的編輯功能。 : ◆ 上一步按鈕,可及時回覆前一次編輯的步驟。 : ◆ 自動儲存編輯進度在同一台電腦上(使用者客戶端),不怕遺失辛苦的編輯修改進度。 : https://i.imgur.com/DQnXzIc.jpg
: 匯入圖片和生成QR code介面 : ◆ 可選擇想要的圖片進行像素轉換及裁切。 : ◆ 完成編輯後生成QR code可利用NSO app掃描後下載到遊戲中。 : https://i.imgur.com/DDuNc8L.jpg
: 照片轉換到遊戲中比對圖 : https://i.imgur.com/2vuzi9s.jpg
: 也可以用來快速製作煙火造型! : 下面是施放哆啦a夢角色群的煙火短片 : https://youtu.be/Qgy6_o6B_Vc
: ================== 說明結束 ================== : 最後,如果你也對自製樣板編輯器有興趣的話 : 我都放在這個DIY方程式裡頭了喔~ : https://github.com/Zack0711/pietro-brush -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.71.75.184 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/AnimalForest/M.1598722834.A.619.html

08/30 04:18, 3年前 , 1F
正需要這個呢XD
08/30 04:18, 1F

08/30 04:45, 3年前 , 2F
有點小問題,字體預覽在滑鼠移除畫框後不會消失,
08/30 04:45, 2F

08/30 04:45, 3年前 , 3F
還有一開始透明色可以選,後來不知道為什麼選不了
08/30 04:45, 3F

08/30 08:04, 3年前 , 4F
這篇唯一的問題大概就是範例了呢XDD
08/30 08:04, 4F

08/30 09:50, 3年前 , 5F
範例影片笑死XDDD
08/30 09:50, 5F

08/30 12:38, 3年前 , 6F
為什麼透明色不能選啊,我怎麼把底色變回透明?
08/30 12:38, 6F
這是個bug,普金已派修理工排除了,重整讀取網頁應該就正常了,感謝回報:D

08/30 17:26, 3年前 , 7F
範例XD
08/30 17:26, 7F
※ 編輯: sPAlchemist (111.71.75.184 臺灣), 08/30/2020 21:58:48

08/31 11:47, 3年前 , 8F
感謝修正
08/31 11:47, 8F

08/31 23:21, 3年前 , 9F
希望有顯示格線的功能
08/31 23:21, 9F
格線的功能有在開發項目中,下次更新應該會實作:D

09/01 00:50, 3年前 , 10F
影片wwwwwww
09/01 00:50, 10F

09/01 07:42, 3年前 , 11F
09/01 07:42, 11F

09/02 12:08, 3年前 , 12F
嗚嗚嗚太晚看到這篇了 之前畫島民生日煙火畫到累死
09/02 12:08, 12F
今天做了些優化跟除錯,在這邊更新一下 ============ 2020-09-06 更新項目 ============ 1. 優化文字點陣化的速度。 2. 修正讀取LocalStorage時,錯誤的格式會造成編輯器無法使用的問題。 (*主要修正之前網友有操作到一半就無法使用的問題) 3. 修正滑鼠移開編輯區域後,文字或者印章圖案仍會停留在上面的問題。 ※ 編輯: sPAlchemist (223.136.230.29 臺灣), 09/06/2020 18:37:56

09/11 06:32, 3年前 , 13F
推更新
09/11 06:32, 13F
文章代碼(AID): #1VIfCIOP (AnimalForest)
文章代碼(AID): #1VIfCIOP (AnimalForest)