2019年1月31日 星期四

2019年1月30日 星期三

2019年1月29日 星期二

使用 Photoshop 製作 sprite 圖片

發表於 1月 29, 2019 /  沒有留言
標籤 ,
想在網站上做動畫的話我們可以使用 css sprite 來製作，不過如果要把圖片接起來還是需要花些時間，要製作 sprite 圖片的話可以考慮找一些線上的產生器，這邊則是介紹一下使用 photoshop 來幫我們產生。

要製作的話首先可以到 github 下載這個 HTML5-Photoshop-Sprite-Sheet-Creator 別人寫好的程式，下載解壓縮後把 WM-Sprite-Sheet-Creator.jsx 這隻檔案放到 photoshop 的 \Presets\Scripts\ 資料夾內，再重新開啟 photoshop 就可以執行了。


安裝好後首先將圖片透過 檔案>指令碼>將檔案載入堆疊 載入 photoshop



接著選擇圖片


載入之後



接這再從 檔案>指令碼 選擇 Create Sprite Sheet from Layers...



再按確認後就可以幫我們把圖片併成一張 sprite 圖了
Read more

2019年1月28日 星期一

2019年1月26日 星期六

2019年1月24日 星期四

2019年1月23日 星期三

2019年1月22日 星期二

2019年1月21日 星期一

2019年1月20日 星期日

新手機 iPhone XR

發表於 2019年1月20日 星期日 1月 20, 2019 /  沒有留言
標籤 , ,


去年手機耗電很快，加上沒趕上年末換電池的折價時間，今年年初剛好看到 apple 的幾隻手機有在特價，查了一下不用 apple 的方案在某些地方也只比 apple 折價後貴 1000 元，就決定買空機了。




















Read more

2019年1月19日 星期六

2019年1月18日 星期五

2019年1月17日 星期四

2019年1月16日 星期三

鋼彈 NT 觀後感

發表於 1月 16, 2019 /  沒有留言
標籤 , , ,






應該是第一次去電影院看鋼彈，查了一下上一部新作鋼彈電影已經是 27 年前的 F91 了，中間有幾部都是改了一下 ova 或 tv 之後上的，也感謝朋友的票讓我有這難得的機會進電影院看。

看完後隔壁的小朋友說鋼彈超好看，帶他來的媽媽就接著說我看到睡著好無聊，放映的廳小小的但坐得頗滿。

總之就一部賣模型的宣傳影片來說我覺得是成功的，鋼彈就是很粉絲向的作品只是粉絲的購買能力驚人而已，看完後本來對金光閃閃的三號機鳳凰無感也覺得還滿帥的可以入手，只是我大概也是想想要，收這種全鍍金的很麻煩。

覺得他有想總結逆襲夏亞到 UC 這段以精神感應框架為主的故事，也想解釋為什麼後來的 F91 後就沒那麼炫炮的感應砲了，但反正就一些後設吧，看鋼彈就只要劇情有流暢作戰很帥氣就讓人可以買單模型了(?

最後的片尾竟然是前陣子放出的閃光哈薩威的預告，既然閃光哈薩威都要出動畫了拜託也出一下骷髏鋼彈系列啊，漫畫一直畫動畫都沒消息。
Read more

2019年1月15日 星期二

2019年1月14日 星期一

2019年1月13日 星期日

2019年1月12日 星期六

2019年1月11日 星期五

2019年1月10日 星期四

2019年1月9日 星期三

2019年1月8日 星期二

2019年1月7日 星期一

Google Maps 網頁嵌入參數

發表於 1月 07, 2019 /  沒有留言
標籤
想要在頁面上嵌入 google maps 的話，可以在網頁上選擇點後再使用分享功能就有可以看到嵌入的碼，不過那個嵌入碼看起來很像亂碼，如果要使用程式產生的話，可以用下面的規則丟入參數就可以了，很方便。

其中各項數值分別為：
  • width = 寬度
  • height = 高度
  • q = 地址或經緯度，如果需要標明可在結尾加上()，於()中輸入表示名稱
  • z = 地圖比例大小，可輸入數值為 1-18，值愈大地圖顯示比例愈大
  • t = 地圖顯示模式，沒輸入值時為預設地圖；h為衛星圖加路線；p為地形圖
  • hl = 地圖語系，語言代碼參考連結
  • output=embed 指定Google Map為崁入模式

Read more

2019年1月6日 星期日

[Vue.js] Component 運用

發表於 2019年1月6日 星期日 1月 06, 2019 /  沒有留言
標籤 ,
可以把 ui 元件組成一個 component，替 component 命名後再設計 template 來使用。

See the Pen vue component by deathhell (@deathhell) on CodePen.




component 可以重複利用

See the Pen component 2 by deathhell (@deathhell) on CodePen.




可以設定 props，這樣就可以把變數傳到 ui 裡。

See the Pen component 3 by deathhell (@deathhell) on CodePen.




如果我們要把資料給傳到 component 內，可以用 v-bind:item，後面的 item 是我們自訂的，會對應到 component 裡的 props，接著就可以利用 v-for 的迴圈把資料都顯示出來。

See the Pen component 3 by deathhell (@deathhell) on CodePen.




使用 $emit 的方式傳入事件名稱，並用 v-on 監聽事件。

See the Pen rovawj by deathhell (@deathhell) on CodePen.



也可以把改變的值用 $event 的方式帶入

或是用 method 處理



methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}


參考: https://cn.vuejs.org/v2/guide/components.html
Read more

2019年1月5日 星期六

2019年1月3日 星期四

2019年1月2日 星期三

2019年1月1日 星期二

訂閱： 文章 (Atom)
Related Posts Plugin for WordPress, Blogger...