創作內容

19 GP

Centonの程式教學~窺視成癮的紳士框

作者:Centon│2019-06-21 22:18:13│巴幣:1,036│人氣:772
紳士框(紳士枠)
是一種滿足人類偷窺慾望的產物


最近的MMD影片中蠻常見的
MMD製作與技術交流」哈拉板上也有相關教學

但有鑑於大家的老婆大多是2D平面的JPG或PNG
這部分網路上似乎沒有教學
所以Centon就來教大家「簡單」製作
能「偷窺」圖片的紳士框吧~

不知道大家是否有圖層的概念?
在大部分繪圖軟體中有著「圖層遮色片」這種東西
能夠限制圖層顯示的範圍
使用Photoshop中的「剪裁遮色片」
就能夠製作同「紳士框」的效果


而在程式中
這個概念又有些不同了
原理跟之前Centon發布過的「view_CTN01」是一樣的


簡單說明
「圖1」指的就是有穿衣服的圖
「圖2」則是沒穿衣服的圖
所以我想透過「框」穿過「圖1」
來看到沒穿衣服的「圖2」

「Parent」在這裡代表「容器」的意思
「圖2」是「父物件」
「框」是「子物件」
所以「圖2」是「框」的容器

而「透明」的概念就是「透過本體」看到後面的東西
由於「框」的容器是「圖2」
理所當然透過「框」透明的部分就能看到「圖2」的內容
就算在「框」與「圖2」之間安插了「圖1」
也改變不了透過「框」能直接看到「圖2」的設定

到這裡了解其中的原理了嗎?
是不是覺得接下來都非常容易了呢

本次使用Visual Studio 2019來編寫程式
首先我們先來開一個新的專案吧~


選到Windows Forms App (.NET Framework)
這次用C#來撰寫~

檔名就叫「紳士探索器」好了


Centon架構使用「.NET Framework 4.0」
大家選擇新一點的架構也沒關係
不一定要跟Centon一樣

按下「建立」後
來到了設計的畫面


從上方的欄位找到「專案」>「紳士探索器 屬性」點進去


接下來就會來到了「屬性」的頁面


點進去「資源」標籤
會看到一個空值字串
我們直接從資料夾裡將圖片拖曳進來吧!


本次範例使用Centon之前畫的「夢襲


為了想要做出原本只有「空空的背景」
而「紳士框」經過就能看到「角色」的效果
所以只有背景的在此命名為「p01」
作為「上層」的圖
有角色的就命名為「p02」
作為「下層」的圖

接下來回到設計的畫面


按下「F7」開始編寫程式


先在「public partial class Form1 : Form」下面
「public Form1()」的上面加入一些全域的變數
來建立我們這次需要的物件
分別是同「圖1」概念的「p1」
以及「圖2」概念的「p2」
還有做為「紳士框」的「frame」


接著我們到「public Form1()」下面繼續寫
先來調整「視窗大小」
因為圖片印出來有A1那~麼大
所以我將視窗縮小為圖片的1/8倍


接下來我們開始設定「p1」、「p2」以及「frame」的屬性吧


當然
如果希望透過「開啟檔案」的畫面
來選取你要的圖片
可以在下面加上這些


這樣執行程式時就會先跳出「開啟檔案」的視窗


但為了教學方便
我們這次還是先使用先前加入的「資源檔」就好~

如果想要透過拖曳圖片進視窗的方式來開啟
像「view_CTN01」那樣的話
這不是今天的教學範圍
所以請不要在課堂上發問哦!

寫好屬性之後
就要把它們都加到視窗裡了


這部分是重點!
將「p1」的容器設為「p2」
也就是上圖註解的「將"p2"設為"p1"的容器」
這樣就能讓「p1」顯示在「p2」的上面了
「frame」的設定也是同樣意思

但由於「p1」和「frame」都為「p2」的子物件
所以「frame」要再加一行程式碼
確定「frame」為最上層

接下來執行看看吧~


執行後會發現沒什麼差別
因為作為「紳士框」的「frame」固定在左上角了

來建立一個能重複執行的「計時器」吧!


每「16毫秒執行一次」是為了模擬「一秒60幀」的效果

「timer.Tick += Timer_Tick;」這行寫完之後就會自動生成
「private void Timer_Tick(object sender, EventArgs e) { }」
刪掉裡面不要的東西
把定位的程式寫進去吧~


執行了之後
發現「紳士框」裡的畫面延遲好嚴重
好不舒服啊!!

(以下GIF圖檔均控制在1MB以下,請安心享用)


所以在定位的程式碼前寫一段刷新的程式碼吧~


這樣「紳士框」裡的畫面就不會有嚴重閃爍的感覺了!


不過箭頭在框框的左上角
在操作畫面上有種說不出的不舒服
我們把游標定位在框框正中間好了


這樣就在中間了哦


如果大家覺得游標在那裏會妨礙欣賞
那麼只要隱藏游標就好囉~


完成~


如何?
自己動手做一個「紳士探索器」
是不是很簡單呢?
大家不妨也來試試吧~

Centonの程式教學
期待下次再見~
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4434858
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 2 篇留言

UWU_54
第一張死圖囉

06-21 22:19

Centon
那是網路找的圖
我在找有沒有替代的圖~06-21 22:21

我的C#都快忘光了

06-21 22:31

Centon
來複習吧[e12]06-21 22:33
我要留言提醒:您尚未登入,請先登入再留言

19喜歡★qaz120212 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:服務員莫妮雅... 後一篇:認識Centon 201...

追蹤私訊切換新版閱覽

作品資料夾

aaa1357932大家
各位有空可以來我家看看畫作或聽聽我的全創作專輯!看更多我要大聲說16小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】