利用Neutralino和Vue輕鬆開發跨平台桌面應用程式

Neutralino是什麼?

自從有了Electron後,以往許多只在Windows上推出桌面應用程式的軟體都紛紛推出Mac和Linux版,讓在這兩個平台上工作變得簡單和舒服了許多;這都是多虧了它的跨平台性所賜。

大家常用的Vscode Studio,也是利用它開發出來的。

然而Electron有一個讓人恨到極點的缺點:那就是它會將網頁(應用程式內容)和顯示內容用的瀏覽器(Chromium)打包在一起,也就讓每一個Electron應用都胖得要死!於是雖然它能讓開發者輕鬆開發跨平台應用,也能利用HTML + JS + CSS 如同寫網頁那般隨意地製作GUI,但也遂漸被重視性能和輕巧的人們敬為遠之。而針對這個問題誕生的,正是Electron的替代品--Neutralino。

Neutralino是一款主打輕量化的桌面應用開發框架,它在功能上基本跟Electron差不多,但不會像前者那樣把Chromium與應用打包在一起,而是會使用系統內建的瀏覽器內核(例如在Windows上會使用Edge)來渲染內容,如此一來就能保證速度之餘達到輕量化的效果。(關於Neutralino和其他同類框架之間的性能比較,請參考這裡 。)

由於Neutralino同時支援純Javascript和前端框架開發,本篇文章主要講述如何利用NeutralinoJS和VueJS,構建屬於自己的跨平台桌面應用程式。

1. 安裝Neutralino的命令行工具:
npm install -g @neutralinojs/neu

2. 運行前面安裝的命令行工具,建立Neutralinojs的空白模板:

neu create [專案名稱] --template neutralinojs/neutralinojs-zero

3. 進入資料夾,移除空白模板內的網頁內容:
cd ./[專案名稱]
rf www

4. 建立存放Vue專案的資料夾替代之,並將專案命名為”vue-src”:
npm create vue@latest

5. 編輯neutralino.config.json,修改Neutralino的設定內容。
主要需要修改的有圖中”title”,”documentRoot”, “resourcesPath”,”clientLibrary”和”icon”的部份:
“title” 是你的應用程式名稱,”documentRoot” 是存在應用內容的地方,因此需要改成”/vue-src/dist”,讓Neutralino讀取已經Build好的Vue專案內容;”resourcesPath”也是同理。
”clientLibrary”則是指Neutralino API庫的位置(我選擇放在/vue-src/public/內)。
雖然沒有它一切也能正常運作,但就會無法存取像是儲存檔案,開啟檔案等API,也就無法像一個真正的本地應用那樣工作了。
至於”icon”,自然就是你的應用ICON路徑了。由於剛開始應該沒有專用的icon,可以先用Vue預設的Favicon(/vue-src/public/favicon.ico)代替。
最終設定應該會像這樣:
6. 下載Neutralino API庫:

neu update

7.  構建Vue專案內容:
cd ./vue-src
npm install
npm run build

8. 回到專案頂層資料夾,運行Neutralino:
cd ..
neu run

登登!大功告成!之後的開發基本上跟平常的Vue應用差不多,但如果需要用到本地應用的API(例如儲存檔案,打開檔案等),就需要參考官方文檔了。

更完整的例子可以參考我寫的這個簡易To-Do-List應用:

https://github.com/falconshark/Neutralino-To-Do/

祝各位開發愉快!

Linux上如何讓OSB只錄制特定軟體的聲音

坦白說,這個問題已經困擾了我很多年了。

因為我自己現在差不多每晚都會跟朋友語音,然後各自在玩自己的遊戲;但有些時侯我又想直播自己玩的過程,而不想讓外人聽見語音內其他人的對話內容….但OBS本身只能選擇錄取不同輸出裝置的聲音,所以根本沒法做到這一點。直到今天靈機一動跑去Stackoverflow上去查,才發現原來Linux是可以用創建”虛擬輸出裝置(Virtual Audio)來達成效果的!

而且做法也非常簡單,只要一行指令就行了:
pactl load-module module-virtual-sink sink_name=VAC_1to2


完成後打開系統上的混音控制器,需要錄音的軟體的輸出裝置更改為剛才新建的Virtual Audio(圖中的Virutal Sink VAC)

再在OBS上將”輸出音效”的音量調至最低,然後新增使用裝置為”Virutal Sink VAC”的”音效輸出”來源即可。

煩惱了這麼久的我,真的是傻瓜….

(後補備註:這個方法在每次重新開機或者更改輸出音效裝置時便會失效,所以最好寫一段腳本方便日後重新啟動虛擬裝置喔)

參考來源: Virtual Audio Cable For Ubuntu

在Linux上輕鬆暢玩帶模組的致命公司

距離致命公司推出一段時間,雖然熱潮已經稍微減退,但在模組的幫助下還是有不少人跟我一樣仍然沉迷在其中。

不過對於使用Linux的人來說,即使Proton能讓我們正常遊玩遊戲,但要使用模組就多少要稍微下些功夫了。

1. 首先,我們需要先安裝Protontricks。它能讓我們方便修改Proton遊戲的Wine設定,使模組框架BepInEx能夠正常運行:
flatpak install flathub com.github.Matoking.protontricks

(使用此指令前需要先安裝Flatpak)

2. 安裝後啟動Protontricks,選擇Lethai Company

3. 選擇”執行預設容器:

4. 再選擇”執行Wine設定程式”:

5. 在Wine設定的”函式庫”裡,新增”winhttp”的函式庫覆寫:

6. 完成後,你的致命公司就能正常啟動BepInEx了。至於安裝BepInEx的方法,則是到其官網Github下載最新版(例如目前是BepInEx_x64_5.4.22.0)
https://github.com/BepInEx/BepInEx/releases

至於遊戲模組本身,則是解壓縮至BepInEx/Plugin資料夾下即可。

7. 啟動遊戲後,只要看到這個BepInEx的小黑窗就代表成功了!

另外也在這篇文章裡推薦一下R2modman這款軟體--它是一款開源的遊戲模組管理器,不但能允許你直接透過Thunderstore平台下載不同遊戲的模組,亦可以按照需要分成不同的遊戲Profile以方便在不同場合使用各自的遊戲模組,甚至將這些Profile匯出分享給其他人,與朋友一起打遊戲時特別方便!

https://github.com/ebkr/r2modmanPlus

享受快樂的遊戲吧!

在Linux上成為Vtuber吧!(VTube Studio)

將Linux當作日常主要作業系統的我,現在已經幾乎所有的事情都能在這上面做,不需要特別切換到Windows系統了。跟我有一樣習慣的人相信也很多,其中也許都想過一個問題:我能在Linux上披上皮套,成為一名Vtuber / 實況主嗎?

答案當然是:可以!

為了做到這點,我們需要的工具有三款:目前十分流行的VTuber軟件VTube Studio,OpenSeeFace以及OBS(Open Broadcaster Software)。

1. 首先,我們需要先安裝VTube Studio。由於它本身並不支援Linux系統,因此我推薦透過Steam進行下載和安裝,方便使用Proton啟動軟體。

2. 下載完畢後,在遊戲清單上選取”VTube Studio”後右鍵,選取”內容”。

3. 點擊”相容性”選項,勾選”強制使用特定Steam Play相容性工具”,選擇使用”Proton Experimental” 開啟遊戲。

4. 確認VTube Studio能正常啟動後,就可以開始準備下一步。(有時侯VTube Studio可能會啟動失敗,這種時侯通常只要重新啟動一次就沒有問題)

在下一階段,我們需要準備的是一款臉容捕捉軟體:OpenSeeFace。

為什麼我們需要OpenSeeFace呢?這是因為VTubeStudio自帶的臉容捕捉並不能在Linux上正常運作,因此必須靠外部的軟體完成臉容捕捉,再將結果傳送到VTubeStudio以達到「虛擬人偶配合本人表情變化/移動」的效果。(而且它是Open Source的喔!)

5. 要使用OpenSeeFace,我們需要先從Gtihub上下載它,準備好所需環境:(主要是Python3相關的)

sudo apt-get install python3 python3-pip python3-virtualenv git
git clone https://github.com/emilianavt/OpenSeeFace
cd OpenSeeFace
virtualenv -p python3 env
source env/bin/activate
pip3 install onnxruntime opencv-python pillow numpy

6. 然後在OpenSeeFace 資料夾下,啟動虛擬的Python環境:

venv/bin/activate

7. 再使用以下指令啟動裡面的facetracker.py即可。其中可能需要調整的參數,主要是其中的”-c”--它的作用是選擇要使用臉容識別的攝影機,而它們的編號一般可能會是0-2之間,在這個例子裡我使用的是攝影機0,如無法正常啟動OpenSeeFace,可以嘗試將它改為其他數字(例如我自己使用的是攝影機2,所以就是 -c 2)

python facetracker.py -c 0 -W 1280 -H 720 --discard-after 0 --scan-every 0 --no-3d-adapt 1 --max-feature-updates 900 --ip 127.0.0.1 --port 11573

正常啟動的OpenSeeFace會顯示出以下畫面:

8. 而為了能讓VTube Studio 與OpenSeeFace之間互相連接,我們需要做點小手段:在VTube Studio的StreamingAssets資料夾內建立名為”ip.txt”的檔案,路徑如下:

~/.local/share/Steam/steamapps/common/VTube Studio/VTube Studio_Data/StreamingAssets/ip.txt

其內容為

# To listen for remote connections, change this to 0.0.0.0 or your actual IP on the desired interface.
ip=0.0.0.0

# This is the port the server will listen for tracking packets on.
port=11573

它能讓VTube Studio每次啟動時自動連接到已經啟動的OpenSeeFace上,如此一來就能如同在Windows /Mac 時那般正常使用臉容捕捉功能囉。

到這裡,基本上差不多就已經大功告成。最後我們要做的就只剩下OBS的部份,由於網絡上已經有許多關於安裝和使用方面的教學,就不在這裡重覆了;但我會額外再講解一下如何在OBS上消除VTube Studio的背景,使它變成透明。

1. 首先我們先點擊選單上的綠色圓圈,選擇”ColorPicker”為背景,再設定顏色為綠幕:

2.  在OBS裡新增來源:截取視窗,將VTubeStudio設定目標後點擊右鍵,選擇”濾鏡”後新增”色彩鍵”濾鏡,再將關鍵顏色類型調整為”綠色”即可。

登登!大功告成!

在Windows和Mac OS上不需要這樣做,但Linux上的VTube Studio無法在OBS上使用透明背景,因此才會需要用到綠幕。

其實這篇文章本來應該是三個月前寫的,結果拖延症到現在才終於動筆…..一如既往地希望能幫上大家。

參考資料:

A Guide to get VTube Studio and VSeeFace working on Linux. Tested on Arch Linux

https://gist.github.com/BenKato151/b8b4a6897cc6cc7835ac9107288d3df2

別再靠夭Steam Deck一堆遊戲不能玩啦!學會安裝Proton GE

最近終於陸陸續續有朋友收到他們的聖誕禮物--Steam Deck了!看見擁有這台好主機的人增加,我自己心裡也覺得很高興。

然而畢竟Steam Deck自帶的是Steam OS,執行Windows遊戲時會使用名為Proton的中間層,而這不一定每個遊戲都適用,所以勢必會有許多人會心想「嗯?好多遊戲顯示不支援呀!」--這應該是因為Valve在更新Proton上一般會比較保守和緩慢的關係吧。

為了解決這個問題,最好的方法就是安裝Proton-GE。這是Proton 的一個Fork版本,建基在Proton的基礎上改良很多的遊戲相容性,也是為何用上它就能解決Steam Deck跑不動某些遊戲的問題。

安裝方法很簡單:

1. 長按Power鍵,切換至桌面模式

2. 桌面模式的工作列裡,有一個名叫Discover的圖標,點擊它

3. 搜尋名為ProtonUp-Qt的軟件,並且安裝

4. 啟動ProtonUp,之後點擊”Add Version”,選擇默認安裝版本即可

5. 完成安裝後回到遊戲模式,選擇需要使用Proton GE的遊戲,設定=>強制使用指定相容性工具,使用最新安裝的Proton GE

6. 啟動遊戲,盡情玩!

一般而言,大部份遊戲搭配上Proton GE都能正常遊玩,除了目前EA遊戲因為要搭配EA PLAY的關係而有問題外都可以盡情享受 🙂

如果對於遊戲能否在Steam Deck / Linux上順利執行,最好的方法是參考ProtonDB 網站:

https://www.protondb.com/

裡面的內容都是基於使用者回報,提出一些在Steam Deck / Linux上運行遊戲時會遇到的問題和可能的解決方法--如果遇到有些遊戲在Steam Deck上跑會有問題,可以參考看看哦。

祝大家聖誕快樂!

在Ubuntu 22.04 上用Lutris遊玩天翼之鍊

上次成功解決楓之谷的問題令我太開心了,於是又手癢來挑戰在Linux下跑天翼之鍊,結果答案是--不完美,但確實能跑!

以下分享我的做法:

1. 在Ubuntu上面安裝Lutis--下載方法詳見Lutris的官網頁面:

https://lutris.net/downloads

2. 啟動Lutris,在左邊的運行環境裡找到Wine,點擊新增/刪除版本,在Wine版本管理器裡安裝Lutris-4.21(理論上其他的Wine版本也行,但我個人跑老遊戲都是用這個版本的)

3. 下載任何一款天翼之的程式。

4.打開Lutris,點擊右上的選單按鈕,選擇Add Games

5. 輸入遊戲名稱,選擇運行環境為Wine,並設定主程序路徑(即為你的天翼之鍊主程式所在)及容器路徑(個人設定為~/Games/tw)。

容器路徑默認是不在存的,需要手動建立對應的空資料夾喔。

 

6. 切換到系統選項,下滾至最底部,選擇使用Xephyr => 16位

7. 如有亂碼問題,亦可以在系統選項上設定Wine環境的語系--
可以在環境變量裡設定LC_ALL = 指定的語系,也可以從Locale那一欄選擇。

 

8. 由於Xephyr的新版不支援滑鼠輸入,所以需要下載1.19.6版的Xephyr並安裝:

https://packages.ubuntu.com/bionic/amd64/xserver-xephyr/download

 

9.安裝完畢後啟動遊戲,現在應該能玩了!雖然會有文字被反白的問題,也無法使用全屏環境而不太完美,但最少….能玩!

 

祝各位遊玩愉快~

在Ubuntu 22.04 上用Lutris遊玩楓之谷(冒險島)

最近看見有朋友在回鍋玩楓之谷,於是便突發奇想打算試試看能不能在Ubuntu上順利跑這款遊戲,結果卻發現問題比想像中多…..
但作為Linux Gamer自然是不會輕易放棄的!為了找出解決方法而谷歌了一下,才發現原來有人在Mac上用Wine成功運行楓之谷,參考他們的做法就終於找出能在Linux順跑這遊戲的方法了~在此分享一下給可能遇到同樣問題的大家。

1. 在Ubuntu上面安裝Lutis--下載方法詳見Lutris的官網頁面:

https://lutris.net/downloads

2. 啟動Lutris,在左邊的運行環境裡找到Wine,點擊新增/刪除版本,在Wine版本管理器裡安裝Lutris-4.21

3. 下載任何一款楓之谷的程式。(個人玩的是夢時代楓之谷,但理論上應該其他版本的楓之谷也能應用這個方法)

4.打開Lutris,點擊右上的選單按鈕,選擇Add Games

5. 選擇手動配置遊戲運行環境

6.  輸入遊戲名稱,選擇運行環境為Wine,並設定主程序路徑(即為你的楓之谷登入器/主程式所在)及容器路徑(個人設定為~/Games/story)。

容器路徑默認是不在存的,需要手動建立對應的空資料夾喔。

 

7. 點擊保存後,打開終端機輸入以下指令安裝運行楓之谷所需的額外套件:

export WINEPREFIX=~/Games/story

winetricks corefonts vcrun6

(~/Games/story 的部份請替換成你在上一步指定的容器路徑)

 

8. 完成後回到Lutris,啟動楓之谷!此時遊戲應該就能正常運行了,祝你遊玩愉快~

 

參考資料:

夢時代-Mac版安裝執行教學

Mac版安裝執行教學 (Running DMS on Mac)

解決Ubuntu 22.04安裝AMD 顯卡驅動失敗的問題

每次升級Ubuntu系統都總能搞出一些新問題….
跟我一樣從AMD 官網(https://www.amd.com/en/support/linux-drivers) 下載amdgpu-install 程式的朋友們應該都遇到跟我一樣的情況:那就是系統會提示所需套件rocm-llvm無法安裝,導致AMD Driver也跟著無法安裝的問題。

原因是在於ROCm目前還不支援Ubuntu 22.04,所以才會發生這種事情;幸好在Github Issues上有人提出了解決方法,才終於能夠順利安裝:

1. 從Github上下載rocm_dummy_packages這個項目:

https://github.com/jacodt/rocm_dummy_packages

2. 切換到項目資料夾,安裝裡面所有的deb包:
dpkg -i *.deb

3. 安裝libstdc++-10-dev:

sudo apt-get install libstdc++-10-dev

4. 重新執行amdgpu-install,問題解決。

參考資料:

ROCm fails to install from APT repository in 22.04 #1713

https://github.com/RadeonOpenCompute/ROCm/issues/1713

Ubuntu 20.04上解決以Lutris運行Warcraft 3 重製版黑屏問題

Lutris真的是很偉大的存在,跟GE Proton一樣偉大。多虧了它們我才終於能夠在Ubuntu上實現玩大部份的遊戲,然而Battle.net和暴雪的遊戲對Wine的支援性實在是低得令人髮指,近期的更新甚至搞的Battle.net都安裝不了。

以下記錄我成功安裝Battle.net,並正常運行Warcraft 3 重製版的方法。

(此處默認電腦已經成功安裝上Lutris)

1. 將Lutris的默認Wine版本設定為Lutris-5.7-11.

2. 在Lutris上下載並安裝Warcraft 3 重製版。(選取Another Version的那段安裝Script)

https://lutris.net/games/warcraft-iii-reforged/

3. 這段安裝Script並不會直接幫你安裝好遊戲,而是直接安裝戰網;安裝完畢後,正常地登入Battle.net,正式下載Warcraft 3 重製版,等待下載完成。

4. 啟動遊戲後,正式情況下應該是會黑屏並且彈出遊戲的,這是正常表現。

5. 之後關掉Battle.net,在Lutris裡單點Warcraft 3 重製版,選擇wineticks,點擊「選擇預設的容器」,確定 =>「執行Wine設定的程式」,確定。

6. 新增Warcraft 3資料夾內的BlizzardBrowser.exe至應用程式設定中(正常路徑為/Program Files (x86)/Warcraft III/_retail_/x86_64/BlizzardBrowser/),將Windows版本設定為Windows 7。

7.  DLL覆寫設定裡,加入d3d11, dxgi 。

8. 最後再次重新啟動Warcraft 3,一切大功告成!

幾經辛苦可算是終於給我找到問題的答案了….

 

參考資料:

https://github.com/doitsujin/dxvk/issues/1866

感謝@ orklann 提供解決方法。

記一次在Ubuntu 20.04上玩FF14的經驗

註:本篇文章編寫時用的是Ubuntu 20.04,但理論上應該20.04 之後版本,甚至Steam Deck都適用文中提到的方法。

最近買了一塊外接1TB的SSD硬碟,然後在上面安裝了Ubuntu 20.04--運行速度不但比裝在HDD時快多了,還能體驗大容量硬碟空間帶來的安全感,實在太爽了!
然而跟Windows不一樣,Linux很少會累積太多的垃圾檔案,而我的重要檔案又基本都放在HDD上,所以1TB的空間其實在正常使用的情況下實在是略多了一點。

於是我就開始嘗試挑戰在Linux上玩遊戲了!

眾所周知,雖然現在Linux 上原生的遊戲已經十年前多很多,但相對來說依然是九牛一毛。然而多虧了Staem Deck的存在,現在用Wine 玩Windows 遊戲也是一個非常理想的選擇了!而我第一款挑戰的遊戲,就是我目前最愛的網絡遊戲--FF14。

實現的方法很簡單:

1. 確認系統已經安裝最新版的顯示卡驅動程式。

我個人使用的顯卡為AMD,Nvdia的我並不太清楚安裝方法,以及運行FF14時的效果…抱歉;)

要下載AMD的最新顯卡驅動,需要前往官方網站尋找對應顯卡的型號,再下載驅動程式安裝器(Radeon™ Software for Linux® installer):

https://www.amd.com/zh-hant/support/graphics

安裝過後,在命令行裡輸入:

amdgpu-install

安裝完成後重啟電腦即可。

2. 前往Flathub,下載並安裝名為XIVLauncher 的第三方啟動器。這是一個基於GPLv3 的自由軟件,請放心使用 🙂

https://flathub.org/apps/details/dev.goats.xivlauncher

要安裝Flathub上提供的軟體,需要先安裝Flatpak:

sudo add-apt-repository ppa:flatpak/stable
sudo apt update
sudo apt install flatpak

3.安裝完成後,啟動XIVLauncher,並輸入你的FF14帳號及密碼,點擊登入。(注意:如果你購買的是Steam版的FF14,請先啟動Steam,並將”Use Steam service” 打勾)

4.登入後,如果你是第一次使用XIVLauncher,它會開始在你的電腦上安裝對應的Wine版本,並且下載及安裝最新版本的FF14。

5.安裝完成後,你就可以經由XIVLauncher啟動FF14,並如同Windows上那樣遊玩了。Have Fun!

有時侯在經XIVLauncher啟動FF14時,有可能會出現明明啟動了卻沒有反應的情況,請不要慌張:你只要重啟XIVLauncher,再Login一次就可以了。 祝大家在艾歐澤亞過得快樂!

Mastodon