taichip’s blog

ブログっぽいブログを書けるように勉強中です

electronを使ってデスクトップにキャラクターを走らせてみた

  • electronとはなにか?
  • electronをインストール、準備

などは省略させてもらいます。

 

素材はなにを使うのか?

天華百剣-斬

天華百剣 -斬-

天華百剣 -斬-

  • DeNA Co., Ltd.
  • ゲーム
  • 無料

 

play.google.com

というゲームのキャラを使っていこうと思います

 

Gifを作る作業などはカット!

素材はこちら

キャラ名:小夜左文字

f:id:taichip:20170920164153g:plain

 

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'); }}↲
 ] }

f:id:taichip:20170920180032p:plain

メニューが出てくればOKですね

アイコンなど参考にさせてもらった記事はこちらです

Electronでデスクトップウィジェットを作るまで - Qiita

 

課題

  • 動作を選択した時にその場から動かす
  • 動作を増やす
  • キャラを増やす
  • コンソールを使わずにアプリとして開始and終了する

 

余談

・作成中に先輩からATOMvimどっちを使うんだ?って言われましたw

私的にはvim使う方が楽しいと思ったので(vim使ったらドヤれるw)

・コンソールはmacに入ってた「ターミナル」を使っていたのですが

「iTerm」を勧められたので使い始めました。もうターミナルは使わないかもしれないw

クラブの目標

お久しぶりの更新です〜

3月にパソコンが壊れてから・・・

4月に修理から戻ってきました!!

という報告でした。

 

本題へ・・・

クラブで個人の目標を立てることになりました

・1つ目は医療情報技師の資格を取ること

 (FEだめだったからこっち頑張る〜)

・2つ目はプログラミング頑張って1つアプリを作る

 授業していて思いました(自分はプログラミングレベル低すぎる!)

 まだ、具体的になにを作ろうかは決まっていませんが・・・

 

以上です。

まだ、これからやりたいことが増えてくるとは思いますが、とりあえずはこれぐらいで

 

余談

マイクラのmod作ってみたい・・・

 

Macのキーボード反応しなくなる

どうもいっち〜です

昨日の午後なんですけど

再起動→ログイン→キーボードが反応しない

ということが起きました

キーボードの反応がないのでこんなメッセージが…⬇︎⬇︎

f:id:taichip:20170226193243j:image

よくわからないのでネットで調べてみると

同じような症状が載ってました

具体的な解決策はこれぐらい?

・NVRAMクリア

・SMCリセット

両方試しましたが同じメッセージが出て

キーボードが反応しません

キーボード壊れたんじゃないの?

がーんf:id:taichip:20170226194556p:image

Apple storeに行くしかないような気がしてきました

こんな内容だけど書かずにはいられない!

www.adventar.org

今日、私が紹介する内容は『モンスト』です。

f:id:taichip:20161216175309p:plain

モンストってなに??


モンスターストライク(モンスト) ストアPV

公式のホームページはこちら↓

www.monster-strike.com

では、モンストがわかったという前提で本題へ・・・

 

昨日、16日(金)にモンストニュースがありました。

www.appbank.net

内容としては獣神化の発表があったり、新しいキャラの発表があったり。

 

「新しいキャラってどんなのがいるんだろう」って気になったんです。

f:id:taichip:20161216181402p:plain

岩融

ミョルニル

如意棒

こっちはいいんですが・・・

 

 

 

 

 

 

 

 

 

 

f:id:taichip:20161216182144p:plain

「新たなネタキャラがきた!」と思わず笑ってしまうのには理由があるんです。

 ↓過去にはこんなキャラが・・・↓

f:id:taichip:20161216213049p:plain

同じ匂いしかしません。( ´ ▽ ` )

もしかしたら書いてる人が同じなのかも・・・

 

 

f:id:taichip:20161216213442p:plain

進化もネタに来たのか!!

ネーミングセンスwww

私たちを笑わせにきてますね。

冗談はこれくらいにして

f:id:taichip:20161216214528j:plain

実は超絶のヤマトタケル零に連れていけます。

降臨の中でジョヤベルンは優秀なのかもしれませんね。

 

最後に・・・

f:id:taichip:20161216215052p:plain

なんか見たことありませんか?www

小◯幸◯なのでは?

これもやはり、ネタにきているな・・・と感じています

 

 

 

<コメント>

先生と先輩に「もっと技術的なブログを書いてほしかった」と言われるのが目に見えています(苦笑)Unityについて書いてもよかったのですが、Unity-chanというものを始めたばっかりなので諦めました。

Unity<4日目>

Unity<4日目>です。

今回は『Ballが衝突するとブロックが消える』ということをします

3D Object→Cubeを選択

f:id:taichip:20161208213917p:plain

名称はBlockにしました。

BlockにScriptを追加しましょう

qiita.com

C#はこちらを参考に・・・

最後に、Ballに「Ball」というタグ(Tag)をつけて・・・

Ballがブロックに衝突したら、消えました。

 

<4日目終了>

今回、割と短いんじゃないかな・・・

1週間もかからなさそう

Unity<3日目>

Unityブロック崩し<3日目>です

今日は・・・

ボールを跳ね返らせる

ラッケトを動かす

までをやろうと思います。

 

まずはボールを跳ね返らせる

Project→Physic Material

f:id:taichip:20161212094228p:plain

Friction CombineをMinimumに

Bounce CombineをMaximumに

f:id:taichip:20161212094704p:plain

Ball→InspectorのMaterialをPhysic Materialにしましょう

f:id:taichip:20161212095547p:plain

ボールが壁を跳ね返って動くようになりました。

 

次にラッケトを動かすところまでいきたいと思います。

3D ObjectのCubeをラッケトにしようと思います。

Racketをちょうどいいところに配置して・・・

Racketを操作するためRigidbodyを追加しましょう

 

RacketにScriptを追加します

C#についてはこれを参考に

qiita.com

ラケットが左右に動きました

 

<3日目終了>

次はブロック崩しのブロックを作ろうと思います。

Unity<2日目>

Unityブロック崩し<2日目>です。

今回はボールを動かすところまでいきたいと思います。

 

まずはボールを作りたいと思います

Hierarchy→ 3D Object→ Sphere

f:id:taichip:20161209121333p:plain

名称をBallにして、ボールの配置と大きさはこのくらいにしておきました。

f:id:taichip:20161209210816p:plain

次に・・・

BallにRigidbodyというコンポーネントを追加していきます。

Rigidbodyで物理的に動かしていきます。

f:id:taichip:20161209211430p:plain

 Massを1に

Dragを0に

Angular Dragを0にしましょう

下のX,Y,Zも写真のようにチェックをつけました

f:id:taichip:20161210162358p:plain

続いて・・・

BallにScriptを追加

f:id:taichip:20161210161852p:plain

f:id:taichip:20161210161902p:plain

C#のところはこちらを参考にさせてもらいました

qiita.com

 

ボールが動きました。

ですが、壁に衝突したらそれ以上は動きませんでした

<2日目終了>

二日目のはずが1日遅れるという・・・

ブログを書くのって大変ですね

次回は「壁に当たったら反射する」

ということをしていこうと思います。