taichip’s blog

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

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

今回は続編です!

前回と同様にelectronを使っていきます。
taichip.hatenablog.com
f:id:taichip:20171128084739p:plain
electronの仕様は

・ウィンドウの背景を透過

・枠の無いウィンドウ

・ウィンドウのリサイズを禁止

・常に最前面

 ・ウィンドウをクリック出来なくする

です。

 

ではhtmlを作る前に素材紹介!

今回は一期一振ちゃんを使っていきます

gifがちょっとひどいのでいつか修正します
f:id:taichip:20171129084703g:plain
index.htmlを書く
 キャラを縦横無尽に走らせたいので、画面の端に来たら反転するようにします。

まずは画像を

<img src="一期一振(右).gif" width="160" height="150"name="moveimage"style="position:absolute;left:0px;top:0px;" >

このように配置します
・widthとheightで大きさを
・position:absoluteを0にして左上に配置します
・moveimageと名称をつけておきます←これがないと、どの画像を指しているかわかりません

コードのなかにjavascriptを書いていきます

<script language="javaScript">
x=0;
y=0;
movementX=2;
movementY=1.5;
windowWidth=window.innerWidth-160;
windowHeight=window.innerHeight-150;
var image=new Array(2);
image[0]="一期一振(左).gif";
image[1]="一期一振(右).gif";
var cnt=0;

・movemomentは画像を動かす値です。
・window.innerでウィンドウのサイズを取得しています。ー(マイナス)の値で引いてるのは画像のサイズです。
次にfunction 関数で処理を行います

x+=movementX;
y+=movementY;

x,y座標に値を入れて動かしていきます。

document.moveimage.style.left=x;
document.moveimage.style.top=y;

f:id:taichip:20171130120129p:plain
documentで反映させています。
これで画像は動きますが画面の端に来たときに反転してくれません。

if((x>windowWidth)||(x<0)){
  movementX = - movementX;
}
 if((y>windowHeight)||(y<0)){
  movementY = - movementY;
}

movemomentの値を反転させることで画像の動きを変えています。

最後にキャラの画像を変えていきます
画像は左向き、右向きだけしかないので

if(movementX<0){
cnt=0;
}else{
cnt=1;
}
document.moveimage.src=image[cnt];

movemomentの値で判断し
f:id:taichip:20171130123432p:plain
documentで反映させています。

ソースコード

<meta charset="UTF-8">
<body onLoad="setInterval('moveimage()',25)">
<!--setInterval("関数名",起動するミリ秒)-->
<img  src="一期一振(右).gif" width="160" height="150"name="moveimage"style="position:absolute;left:0px;top:0px;" >
<script language="javaScript">
x=0;
y=0;
movementX=2;
movementY=1.5;
windowWidth=window.innerWidth-160;
windowHeight=window.innerHeight-150;
var image=new Array(2);
image[0]="一期一振(左).gif";
image[1]="一期一振(右).gif";
var cnt=0;


function moveimage(){
x+=movementX;
y+=movementY;
// 端に来たときだけ処理をおこなう
if((x>windowWidth)||(x<0)){
  movementX = - movementX;
  // ここで値を反転させる


if(movementX<0){
cnt=0;
}else{
cnt=1;
}
  document.moveimage.src=image[cnt];
// 位置を反映させる
}
 if((y>windowHeight)||(y<0)){
  movementY = - movementY;
}
document.moveimage.style.left=x;
document.moveimage.style.top=y;
}
</script>
</body>

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日目終了>

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