electronを使ってデスクトップにキャラクターを走らせてみた
- electronとはなにか？
- electronをインストール、準備
などは省略させてもらいます。
素材はなにを使うのか？
天華百剣-斬
というゲームのキャラを使っていこうと思います
Gifを作る作業などはカット！
素材はこちら
キャラ名：小夜左文字
HTMLを書いていく(right.html)
HTML側の作業は比較的簡単です
画像を動かすために<Marquee>というタグを使います
あとは、サイズや速度などを調整して終了です！
javascriptを書いていく(main.js)
mainWindow =new BrowserWindowでウインドウの設定をする
transparent: true //ウィンドウの背景を透過
frame: false // 枠の無いウィンドウ
resizable: false // ウィンドウのリサイズを禁止
alwaysOnTop: true //常に最前面
ウィンドウをクリックできなくします
mainWindow.setIgnoreMouseEvents(true)
メニューから動作を変える
var contextMenu = Menu.buildFromTemplateでメニューを作る
{ label: '小夜左文字',submenu:[↲
{label:'停止',click () { mainWindow.loadURL('file://' + __dirname + '/stop.html'); }},↲
{label:'左',click () { mainWindow.loadURL('file://' + __dirname + '/left. html'); }},↲
{label:'右',click () { mainWindow.loadURL('file://' + __dirname + '/right .html'); }}↲
] }
メニューが出てくればOKですね
アイコンなど参考にさせてもらった記事はこちらです
Electronでデスクトップウィジェットを作るまで - Qiita
課題
- 動作を選択した時にその場から動かす
- 動作を増やす
- キャラを増やす
- コンソールを使わずにアプリとして開始and終了する
余談
・作成中に先輩からATOMかvimどっちを使うんだ？って言われましたw
私的にはvim使う方が楽しいと思ったので(vim使ったらドヤれるw)
・コンソールはmacに入ってた「ターミナル」を使っていたのですが
「iTerm」を勧められたので使い始めました。もうターミナルは使わないかもしれないw
