2019年8月31日 星期六

2019年8月30日 星期五

[黏土人] 洛克人 X(素身)

P1200611

黏土人這次洛克人系列推出的是素組的艾克斯(X),黏土人就單純的比例很可愛,其他就隨意了。

P1200596P1200598P1200599

同樣是素身,艾克斯的造型只有到 X8 才有變化,這款造型就是經典版本的造型。

P1200600P1200601P1200602P1200603P1200604

黏土人的可動性其實很差,可以靠替換零件來擺動作,但由於手腳都短短的其實也看不大出來換了零件後可以變怎樣,要換姿勢拍照都要多試幾次才能試出想要的動作。


P1200605P1200606

洛克飛彈。

有附小飛彈跟集氣飛彈。

P1200607P1200608

一樣是靠小腳架可以擺出發射的狀態。

P1200609P1200610P1200611

我黏土人大概也只收洛克人的系列,目前還是許願七種系列或是 X 的所有裝甲都能夠出完,或出多少我就買多少囉。
Read more

2019年8月28日 星期三

javascript 陣列條件搜尋: filter

我們要在 js 的一個陣列裡面去篩選我們想要的資料,可以使用 filter 的方式,首先我們先準備一個原始資料如下:

var people = [
  {
    name: 'Jason',
    school: '建國中學',
    age: 18
  },
  {
    name: 'Sarah',
    school: '北一女中',
    age: 24
  },
  {
    name: 'Tony',
    school: '成功高中',
    age: 32
  },
  {
    name: 'Susan',
    school: '松山高中',
    age: 16
  }
];

要過濾的話用法如下,我們這邊可以再過濾後生成一個新的 array:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback
此函式為一個斷言,用於測試陣列中的每個元素。回傳值為 true 時將當前的元素保留至新陣列中,若為 false 則不保留。可傳入三個參數:

element
原陣列目前所迭代處理中的元素。

index(選擇)
原陣列目前所迭代處理中的元素之索引。

array(選擇)
呼叫 filter 方法的陣列。

thisArg(選擇)
執行 callback 回呼函式的 this 值。


要取得年齡大於 20 歲的話
var ageThan20 = people.filter(function(item, index, array){
  return item.age > 20;       // 取得大於 20 歲的
});
console.log(ageThan20); // Tony, Sarah

改成用 function
function isOrderThan(value) {
  return value.age >= 20;
}
var ageThan = people.filter(isOrderThan);

像這樣可以取得特定學校
var school = people.filter(function(item, index, array){
  return item.school == "成功高中"; 
});
console.log(school)

這個熟悉的話對於要再處理物件是很方便的事情。
Read more

[NXEDGE STYLE] EVA 13 號機

P1200588

NXEDGE STYLE 在福音戰士系列出的還滿多的,除了之前的零號一號二號外,13 號機也推出了,其他還有 6 號機跟舊劇場版 5 號機等。

P1200581P1200582

這隻出自《福音戰士新劇場版:Q》,看起來很像初號機但有些細節不大一樣,最大的差別就是有四隻手。

P1200583P1200584P1200585P1200586

原作是真嗣跟薰駕駛的,新劇場版後面的初號機衍生機設計上都有點像神的感覺了。



使用的武器其中有一個是這個兩把朗基努斯之槍。

P1200587P1200588P1200589P1200590
看起來很嚇人可是很難戰鬥的感覺。

P1200591P1200592P1200593P1200594P1200595

似乎明年就會是新劇場版最後一集了,不知道庵野秀明又會給我們什麼驚喜。

Read more

2019年8月27日 星期二

2019年8月26日 星期一

SVG 的遮色片- mask 基礎

在 svg 也能使用類似 photoshop 的遮色片的效果,遮色片簡單說就是可以依據你指定的圖片依據本身顏色的資訊,讓被遮的圖片會有半透明的效果,這邊來示範一下,這邊我們設定簡單的紅藍綠來當遮色片:

    
  

接下來像這樣把遮色片指定上去

    
  

結果如下,可以看得出來越深的顏色遮上去後透明度越低。

See the Pen
svg mask color
by deathhell (@deathhell)
on CodePen.




我們也可以用透明度來做遮色片:

See the Pen
svg mask
by deathhell (@deathhell)
on CodePen.


接著我們把遮色片套到圖片上,先指定 svg 的漸層來當 mask

       
       


接著把遮色片套到圖片上就完成了。


See the Pen
svg mask image
by deathhell (@deathhell)
on CodePen.

Read more

2019年8月25日 星期日

2019年8月23日 星期五

2019年8月19日 星期一

[三國創傑傳] 夏候惇トールギスⅢ(夏侯惇托爾吉斯Ⅲ)

P1200578

三國創傑傳魏國(區)的第三隻就是曹操的好兄弟夏侯惇托爾吉斯Ⅲ啦,這次用托爾吉斯Ⅲ大概是為了要用鋼彈 W 系然後又因為有 I, II, III所以可以來當兄弟,目前也確定托爾吉斯會是夏侯淵了,就不知道是否會有托爾吉斯II了。

P1200572P1200573P1200574

一眼就能看出原型是托爾吉斯Ⅲ,瞎了一隻眼的部分不明顯,而且這次很奇怪的是這次不管原本是不是鋼彈臉都要在下面有一個鋼彈臉,大概還是有鋼彈臉可以賣得比較好吧,這隻就是用一個透明的零件遮住,拿下來就是鋼彈臉了。

P1200575P1200576

武器就真的不大想吐槽了,因為背景的關係(?)所以任何現代化的武器都可以直接拿來用,夏侯惇的武器就是跟原本的托爾吉斯Ⅲ一樣沒有太明顯的變化。

P1200577

可動性也是可以接受的範圍,補色的部分就腳部跟腰部有些地方要塗成白色,還算好處理,黃色的零件也都塗成金色後再把貼紙貼上去就還不錯了。

P1200578P1200579P1200580

Read more

2019年8月18日 星期日

CSS 的 content 與應用

content 是一個可以用來無中生有的 CSS 屬性,這邊先來看一個簡單的例子:

,我是

本來我們只有一個這樣的內容,那如果我們要在前後都無中生有加上東西,就可以像這樣用 css:
.content::before{
  content: "大家好";
}
.content::after{
  content: "紅色死神";
}

這邊我們使用 ::before 跟 ::after,照字面看大概可以知道我們就是在選擇器的前後加上東西,而加上的就是我們自訂的文字內容,結果如下:

See the Pen
css: content
by deathhell (@deathhell)
on CodePen.



content 可以使用的值有以下幾種:
1. 文字
2. unicode
3. attr
4. url
5. counter 函數
6. css變數

2. unicode
剛才我們看過純文字了,接下來看 unicode,unicode 是瀏覽器內建的特殊符號,比如說這邊我們就用 \2103 來自動產生攝氏溫度的單位:

See the Pen
css: content unicode
by deathhell (@deathhell)
on CodePen.



3. attr
attr 指的是 html 的屬性,這邊我們示範利用自訂屬性把值給帶到 content 裡
現在天氣:

再利用 css 去拿 data 裡的值
.content::after{
  content: attr(data-weather);
}

結果如下:

See the Pen
css: content attr
by deathhell (@deathhell)
on CodePen.



4. url
url 可以直接去拿一個線上的內容,比如說圖片的網址

See the Pen
css: content url
by deathhell (@deathhell)
on CodePen.



5. counter 函數
counter 是一個有趣的東西,我們必須先認識這些跟 counter 有關的屬性,也就是 counter-reset 跟 counter-increment
counter-reset: 自訂一個要當 counter 的變數,後面可以帶預設的值
counter-increment: 要如何累進,可填正數或負數

利用這個我們來把列表前面加上數字:
蘋果
香蕉
柳丁

.wrap{
  counter-reset: count;
}
.wrap div::before{
  counter-increment:count; 
  content:counter(count) '. ';
}

See the Pen
css: content counter
by deathhell (@deathhell)
on CodePen.



6. CSS 變數
這裡我們把第一個範例的名字變成 css 的變數,用法如下:

See the Pen
css: content
by deathhell (@deathhell)
on CodePen.


用 css 的 content 大多會搭配偽元素,用得好的話是可以讓你的 css 變得更有彈性,有興趣的朋友可以玩玩看。
Read more

2019年8月17日 星期六

[三國創傑傳] 張郃アルトロンガンダム (張郃雙頭龍鋼彈)

P1200570

三國創傑傳第二隻完成的系列是以 W 鋼彈(EW版)裡的哪吒為原型的張郃雙頭龍鋼彈,這也是魏國的第二隻機體,設定上原本是山賊,後來變成曹操的部下,不過這次的三國創傑傳的劇情真的可以不用理他了。


P1200558P1200559

原型:XXXG-01S2 雙頭龍鋼彈(EW版)
武器:兩尾銳槍、無盡雙頭(肩甲)
擅長槍術,也能控制雙肩的盔甲來戰鬥


P1200560P1200561

這次的造型滿滿意的,顏色也跟原型一樣以綠色為主,肩上的龍爪一樣可以伸展但顏色就改成紫色了。

P1200562P1200563

透明的槍就沒有跟原本的配色一樣,雙槍的頭可以裝到肩上的龍頭上。

P1200564P1200565P1200566

可動性一樣普普通通,裙甲上有搭配透明配件,但肩上的紫色就必須自己處理了,我這邊是使用有亮點的紫色油漆筆塗裝,覺得效果還不錯,裙甲後半部也是一樣的方式處理。

P1200567P1200568

龍頭伸出來就有點尷尬,看照片好像可以往前但我怎樣就沒辦法擺成這樣,可以往前的話應該就能更有魄力。

P1200569P1200570P1200571

這隻我也很滿意,現在也看到地獄死神的情報圖出來了,真希望五小強都能夠在這次實體化啊。
Read more
Related Posts Plugin for WordPress, Blogger...