2018 ソフトウェア設計及び演習用の班Wiki

18::gr07::近江愛結

archive mode

!目次
*[[6/1|#p1]]
*[[6/8|#p2]]
*[[6/15|#p3]]
*[[6/22|#p4]]
*[[6/29|#p5]]
*[[7/6|#p6]]
*[[7/13|#p7]]
*[[7/20|#p8]]
*[[7/27|#p9]]
*[[7/31以降|#p10]]

*[[トップページへ戻る|18::gr07]]

<<6/1>>
スタート直後のストーリーアニメーションの作成。 
jQueryをダウンロードし、タイプライターのように文字を表示するようにした。

<<{image_1.png}

画像だとわからないが、実際は一文字ずつ順番に表示されていく。

<<<改善点>>>
*文字の位置を少し下げる
*クリックしたら次の文または画像に切り替わるようにする 
　→画面をクリックしたら変数countの値が1増えるようにし、その値に応じて表示する文章を変える

[[▲ページ上部へ|#]]

<<6/8>>
文字の位置を下げることに成功した。
次の文章を表示しようと試みたが、同時に表示されてしまう。

<<{Screenshot-2018-6-8 カーニハンの大冒険(蟹).png}

改善策を探しつつ、タイトル画面の作成をした。

<<{image_3.png}

背景は仮のものである。 
ボタンを設置し、クリックしたボタンによってその後の動作が変わる。

<<<改善点>>>
*引き続き文章が順番に表示されるように頑張る
*ウィンドウを拡大・縮小した時にボタンの位置が変わってしまうのをどうにかする

[[▲ページ上部へ|#]]

<<6/15>>
日本語入力ができなくて困った。(6/22mozc設定修正済み)
 
6/8時点の2文が同時に表示されてしまう件を改善するよう試みたがうまくいかなかった。 
カーソルが点滅するようなエフェクトをとりやめ、文字だけがカタカタと入力されていくように変更。 
---
(before) 
 <script src="jquery-3.3.1.min.js"></script>
 
<script src="t.min.js"></script>
 
 <script>
 
 $(function(){
 $(".sent1").t({
 speed : 100
 });
 });
 
 $(function(){
 $(".sent2").t({
 speed : 100
 });
 });
 
 </script>

↓

(after) 
 <script src="jquery-3.3.1.min.js"></script>
 
 <script src="t.min.js"></script>
 
 <script>
 
 $(function(){
 $(".sent1").t({
 speed : 100,
 caret : false
 });
 });
 
 $(function(){
 $(".sent2").t({
 speed : 100,
 caret : false,
 delay : 3
 });
 });
 
 </script>
---
 
caretオプションでカーソルの表示設定をoffにし、2文目をやや遅らせて表示させるように変更。 
これにより、自然なオープニングアニメーションになった。

<<{screen.png}
 (スクショだと違いがわからない・・・)

ページ遷移の設定も行った。
タイトル画面のボタンをクリックするとゲームが始まる(オープニングアニメーションに遷移する)ようにした。

---
 <body> 
 <div class="sea"> 
 <img src ="title.jpg" /> 
 <input type="submit" value="ゲームを始める" onclick="javascript:location.href = 'title.html';"> 
 </div> 
 <div class="button2"> 
 <input type="submit" value="ゲームを終了する" onClick="if (/Chrome/i.test(navigator.userAgent)) { window.close(); } else { window.open('about:blank', '_self').close();}"> 
 </div> 
 <div class="button3"> 
 <input type="submit" value="カーニハンwiki" onClick="window.open('https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%BB%E3%82%AB%E3%83%BC%E3%83%8B%E3%83%8F%E3%83%B3')"> 
 </div>
---

終了ボタンの実装に苦労した。
検索して出てくる"window.close();"だけを入力しても全くウィンドウが閉じる気配がなく、対処法を検索して出てきたこのタグで対応。 
一応ゲームは終了するが、空白タブに入れ替わるだけである。ここも改善の余地あり。

文字タイプに合わせてキーボード音がなるようにした。 
しかし、文字の長さより効果音の再生時間のほうが長く違和感。 
波形編集ソフト等で効果音のトリミングを行おうと試みるもAudacityのlinuxバージョンのインストール方法がわからず・・・。

<<<改善点>>>
「ゲームを終了する」ボタンをクリックしたらウィンドウごと閉じるようにする。 
7秒ある効果音を5秒ほどにトリミングし実装する。

[[▲ページ上部へ|#]]

<<6/22>>
オープニングアニメーションに3文目「しかもここは海の底」4文目「とにかくここから出よう」を追加する。

6/1の改善点「クリックしたら次の文または画像に切り替わるようにする
　→画面をクリックしたら変数countの値が1増えるようにし、その値に応じて表示する文章を変える」
 
これを実装しようと頑張ったができず。他の方法を考えてみることにした。

ページ遷移を使って3、4文目を表示する。
 
新たなページ“title2.html”を作成。 
“title1.html”のヘッダ部分に以下のコードを追加。
---
$(function(){ 
 setTimeout(function(){ 
 window.location.href = 'title2.html'; 
 },7000); 
});

---
これで1、2文目が表示された7000ms後に3、4文目が表示されるようになった。

<<{sent3.png}

このアニメーションが終了したらステージ1のプレイ画面に切り替わる。（後々実装予定）

[[▲ページ上部へ|#]]

<<6/29>>

ゲームオーバー画面の制作にとりかかる。

このような画面を作りたい。
 
<<{1530247807348.jpg}
 
使用したカニの画像は私が大晦日に食べたものであるので著作権は問題なし。
 
フォントや色は仮のものである。とりあえずこのように文字や画像を配置したい。
 そして全体をフェードイン表示させたい。

全体をフェードインさせるcssがあったのでこれを使うことにした。
---

body { 
 animation: fadeIn 2s ease 0s 1 normal; 
 -webkit-animation: fadeIn 2s ease 0s 1 normal; 
 } 
 
 @keyframes fadeIn { 
 0% {opacity: 0} 
 100% {opacity: 1} 
 } 
 
 @-webkit-keyframes fadeIn { 
 0% {opacity: 0} 
 100% {opacity: 1} 
 } 
---
 
「かにのうわさ」を考える。 
[カニの豆知識|http://onsenyado.sakura.ne.jp/kani_mame.html]からいくつか引用。
 
とりあえず10個考える。
 
ランダムで文が出るようにする。
 body内に以下の文を追加。
 
 
---
<div class="message"> 
 <script type="text/javascript"> 
 var msg = new Array(10); 
 msg[0] = 'ここに豆知識を書く'; 
( ( 略 ) ) 
 msg[9] = 'ここに豆知識を書く'; 
 
 var num = Math.floor(Math.random() * msg.length); 
 document.write(msg[num]); 
</script> 
 
</div>

---
これでランダム表示ができた。

文字や画像をセンタリングし、ほぼ理想どおりの画面ができた。あとはここにボタンをつける。
 
 
<<{gameover.png}

[[▲ページ上部へ|#]]

<<7/6>>
ゲームオーバー画面にボタン設置、そしてフォントの変更を行う。

タイトル画面のときと同様にボタンを設置。(「タイトルに戻る」「やりなおす」の2つ) 
 
“GAME OVER”のフォントを変更する。
 
[こちらのサイト|http://uxmilk.jp/52837]より、Caveatというフォントを使用する。 
HTMLに
---
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
---
CSSに
---
font-family: 'Caveat', cursive;
---
を加える。 
さらに、文字のサイズと間隔、位置を変更したので、“GAME OVER”部分のCSSは以下のようになる。
---
.title { 
 color: #FF0000; 
 font-size: 60px; 
 text-align: center; 
 margin-top: -45px; 
 letter-spacing: 10px; 
 font-family: 'Caveat', cursive; 
 } 
---
「かにのうわさ」の部分を少しいじってみたくなったのでいろいろ変えてみる。 
最初はフォントを変更しようと試みたが、ピンとくる日本語フォントがなかったため断念。 
 
最終的に、枠で囲ってみることにした。 
[こちらのサイト|https://saruwakakun.com/html-css/reference/box]を参考にした。
 
26番目のタイトル付きボックスをベースに、枠線を点線に変更したものを使用。 
HTMLは
---
<div class="box26"> 
	 
 カニのうわさ 
 
 <script type="text/javascript"> 
 var msg =new Array(10); 
msg[0] = 'ここに豆知識を書く'; 
( ( 略 ) ) 
 msg[9] = 'ここに豆知識を書く'; 
var num = Math.floor(Math.random() * msg.length); 
document.write(msg[num]); 
</script> 
 </div> 
---

CSSは

---
 .box26 { 
 position: relative; 
 margin: 2em 2.5em; 
 padding: 0.5em 0em; 
 border: dashed 2px #FFFFFF; 
 border-radius: 8px; 
 } 
 
 .box26 .box-title { 
 position: absolute; 
 display: inline-block; 
 top: -13px; 
 left: 10px; 
 padding: 0 9px; 
 line-height: 1; 
 font-size: 19px; 
 background: #000; 
 color: #FFFFFF; 
 font-weight: bold; 
 } 
 
 .box26 p { 
 margin: 0; 
 padding: 0; 
 color: #FFF; 
 background:#000; 
 text-align: center; 
 } 
---
となった。

<<{screen2.png}

これでとりあえずステージ1のGAMEOVER画面は完成。 
これをコピーしてステージ2、3用のGAMEOVER画面も作成した。 
 
タイトル画面とゲームオーバー画面にそれぞれフリー素材のBGMをつけた。

ずっと悩まされてきた「ウィンドウサイズを変えるとボタンの位置も変わってしまう問題」を解決する。

今まで作った「タイトル画面」「ストーリー画面」「ゲームオーバー画面」のCSSに追加。
---
body { 
 width: 600px; 
 height: 450px; 
} 
---
これで背景が固定されたのでウィンドウサイズを変えてもボタンや画像の位置がずれることがない。
 
 
別のストーリー画面を作らなきゃいけないのだが、飽きてきたのでエンドロールから作ってみることにした。 
[こちらのサイト|http://co-jin.net/web/movie-credits]を参考に、映画っぽい感じにしてみる。

HTML、CSSはとても長くなるので割愛。 
背景を少し工夫してみる。

[こちらのサイト|https://www.webcreatorbox.com/tech/css-gradient]を参考に、グラデーションがかかった背景に画像が透けて見えるような背景を作ってみる。

とりあえず実行できるかを確認するために、色はサイトの例のまま、画像は[[素材集|18::gr07::活動記録]]のカニのイラストを使う。

背景部分のCSSは以下の通り。
---
body { 
 background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)), url(http://wiki.cis.iwate-u.ac.jp/~wiki/csd/group.cgi/2018/?p=18%3A%3Agr07%3A%3A%E6%B4%BB%E5%8B%95%E8%A8%98%E9%8C%B2;f=image2.jpeg); 
 width:600px; 
 } 
---

いい感じのエンドロールができた。次はこれを修正していこうと思う。 
<<{endroll.png}

[[▲ページ上部へ|#]]

<<7/13>>
エンドロールの修正から始める。 
背景を海っぽい色合いにして、スクロールが終わったらエンドページ(これから作る)に遷移するようにする。

なんとなくゲームのロゴ的なものが欲しかったので作ってみた。 
<<{kanirogo2.png}

これをエンドロールの最初に流す。 
最後は「and you!」で締める。

<<{screen4.png} 
<<{screen5.png}

スクロールし切るまでに何秒かかるか計測し、ページ遷移のコードを足す。 
---
$(function(){ 
 setTimeout(function(){ 
 window.location.href = 'end.html'; 
 },52000); 
 }); 
---

次に、エンド画面を作成する。

さっきのロゴと「おわり」という文字をフェードイン→フェードアウト→トップページに遷移　という流れにしたい。

htmlは
---
<div class="box"> 
 <div class="title"><img src="kanirogo2.png"></div> 
 <div class="end">おわり</div> 
 </div> 
---

cssは

---
 body{ 
 width:600px; 
 background-color:#000; 
 } 
 
 .box { 
 position: relative; 
 } 
 
 div.title{ 
 float:left; 
 position: relative; 
 width: 600px; 
 height:450px; 
 margin:0 auto; 
 animation-name: 'anime'; 
 animation-duration: 8s; 
 animation-timing-function: ease; 
 animation-delay:0; 
 animation-iteration-count: 1; 
 animation-direction:normal; 
 animation-fill-mode: forwards; 
 text-align:center; 
 } 
 
 .title img{ 
 position: absolute; 
 top: 0; 
 left: 0; 
 right: 0; 
 bottom: 0; 
 margin: auto; 
 width:70%; 
 height:50%; 
 } 
 
 div.end{ 
 float:right; 
 position: relative; 
 width: 150px; 
 height:50px; 
 margin:0 auto; 
 animation-name: 'anime'; 
 animation-duration: 8s; 
 animation-timing-function: ease; 
 animation-delay:0; 
 animation-iteration-count: 1; 
 animation-direction:normal; 
 animation-fill-mode: forwards; 
 text-align:center; 
 } 
 
 .end { 
 position: absolute; 
 top: -100px; 
 left: 0px; 
 right: 0px; 
 bottom: 0px; 
 margin: auto; 
 width:70%; 
 height:50%; 
 color:#FFF;
 font-size:40px; 
 } 
 
 @keyframes 'anime' { 
 0% {	opacity:0;	} 
 50% { opacity:1; } 
 100% {	opacity:0;	} 
 } 
---

javascriptは

---
 $(function(){ 
 setTimeout(function() { 
 window.location.href = 'index.html'; 
 },10000); 
 }); 
---

これで思い通りの動作になった。

<<{screen6.png}

[[▲ページ上部へ|#]]

<<7/20>>
半カニの画像ができたようなので、それを使ってステージ2の前のストーリーアニメーションを作る。

スクショをとってGIFアニメを作り、ページ遷移を用いてアニメーションを完成させる。

このgifアニメが、一度ページを開いたあとに再度ページを開くと最後のコマのまま動かないという事態が発生した。 
どうやらキャッシュが残ってしまうことが原因の模様。 
[こちらのサイト|https://blanche-toile.com/web/jquery-gifanimation-load-web-caching]を参考に、画像の末尾の数字を変えて違う画像と認識させ、何度ページを開いても最初からgifが再生されるようにした。

このような動作になった。

<<{スクリーンショット_2018-07-20_17-19-54.png}

<<{スクリーンショット_2018-07-20_17-20-10.png}

<<{スクリーンショット_2018-07-20_17-20-31.png}

<<{スクリーンショット_2018-07-20_17-20-47.png}

エンドロールに効果音を追加した。

[[▲ページ上部へ|#]]

<<7/27>>
第2ステージと第3ステージの間のストーリーを作る。 
 
文章は今までと同様にカタカタとタイプライターのように表示。 
2文目と3文目の間にアニメーションを挟む。

[こちらのサイト|https://daneden.github.io/animate.css/]より、animate.cssをダウンロード。

画像にエフェクトをつけていく。

<<{スクリーンショット_2018-07-27_17-51-18.png}
 
 
<<{スクリーンショット_2018-07-27_17-51-43.png}
 
背景をメルヘンっぽく。 
スライドアウトのときにはキラキラしたサウンドをつけ、フェードインのときには「わぁ〜お♡」というボイスを流すようにした。 
 
 
 　[[▲ページ上部へ|#]]

<<7/31以降>>
ストーリーを完成させた。 
animate.cssやgif画像を駆使してそれっぽい感じに。 
背景をぼかすcssを実装し、悲しげな感じを表現。 
ゲームと結合させたときにウィンドウサイズが大きく違っていたのですべてのストーリー、ゲームオーバー、タイトル画面のサイズを変更。 
タイトル画面に「あそびかた」の項目を追加。 
 
ストーリーの後にゲームへの遷移、ゲームオーバー画面の「やりなおす」をクリックした時にそのステージからやり直せるような遷移などを実装。 
 
 
すべてのページにBGMや効果音を追加。

終わり！

[[▲ページ上部へ|#]]

---
<<[[トップページへ戻る|18::gr07]]

Tag:

Attachment

New: append-tag

(download: 11305 bytes, at 2018/06/29 13:51:56 )
(download: 8457 bytes, at 2018/06/08 16:09:11 )
(download: 181528 bytes, at 2018/07/06 16:53:31 )
(download: 180981 bytes, at 2018/07/03 14:18:18 )
(download: 6862 bytes, at 2018/06/01 15:54:08 )
(download: 297336 bytes, at 2018/06/08 16:25:05 )
(download: 9299 bytes, at 2018/07/13 16:54:30 )
(download: 10895 bytes, at 2018/06/22 13:15:11 )
(download: 141715 bytes, at 2018/07/06 14:41:19 )
(download: 38911 bytes, at 2018/07/13 16:58:37 )
(download: 6792 bytes, at 2018/07/13 16:58:52 )
(download: 55599 bytes, at 2018/07/13 17:16:19 )
(download: 7979 bytes, at 2018/06/29 13:35:01 )
(download: 446 bytes, at 2018/06/01 15:55:43 <frozen> )
(download: 584 bytes, at 2018/06/01 16:23:38 <frozen> )
(download: 1249 bytes, at 2018/06/08 16:28:07 <frozen> )
(download: 3917 bytes, at 2018/06/22 13:33:12 <frozen> )
(download: 4473 bytes, at 2018/06/22 13:43:05 <frozen> )
(download: 4477 bytes, at 2018/06/22 13:43:51 <frozen> )
(download: 4532 bytes, at 2018/06/22 13:47:17 <frozen> )
(download: 5745 bytes, at 2018/06/29 13:43:31 <frozen> )
(download: 6075 bytes, at 2018/06/29 13:54:29 <frozen> )
(download: 6078 bytes, at 2018/06/29 13:55:09 <frozen> )
(download: 6164 bytes, at 2018/06/29 14:01:05 <frozen> )
(download: 6342 bytes, at 2018/06/29 14:10:34 <frozen> )
(download: 6387 bytes, at 2018/06/29 14:11:21 <frozen> )
(download: 6863 bytes, at 2018/06/29 14:25:02 <frozen> )
(download: 7093 bytes, at 2018/06/29 14:30:43 <frozen> )
(download: 7555 bytes, at 2018/06/29 16:17:22 <frozen> )
(download: 7718 bytes, at 2018/07/03 14:19:12 <frozen> )
(download: 10439 bytes, at 2018/07/06 14:42:29 <frozen> )
(download: 10453 bytes, at 2018/07/06 14:42:56 <frozen> )
(download: 10552 bytes, at 2018/07/06 15:12:05 <frozen> )
(download: 11151 bytes, at 2018/07/06 16:01:28 <frozen> )
(download: 12348 bytes, at 2018/07/06 16:53:52 <frozen> )
(download: 12366 bytes, at 2018/07/06 16:55:15 <frozen> )
(download: 12356 bytes, at 2018/07/13 13:16:40 <frozen> )
(download: 15585 bytes, at 2018/07/13 17:20:35 <frozen> )
(download: 15585 bytes, at 2018/07/20 13:10:27 <frozen> )
(download: 16419 bytes, at 2018/07/20 17:45:28 <frozen> )
(download: 16423 bytes, at 2018/07/20 17:45:58 <frozen> )
(download: 16742 bytes, at 2018/07/20 18:11:34 <frozen> )
(download: 16776 bytes, at 2018/07/20 18:13:41 <frozen> )
(download: 17599 bytes, at 2018/07/27 18:13:41 <frozen> )
(download: 13894 bytes, at 2018/07/20 17:21:54 )
(download: 46241 bytes, at 2018/07/20 17:22:06 )
(download: 47666 bytes, at 2018/07/20 17:22:15 )
(download: 14238 bytes, at 2018/07/20 17:22:22 )
(download: 158991 bytes, at 2018/07/27 17:58:07 )
(download: 269487 bytes, at 2018/07/27 18:01:29 )

Edit

18::gr07::近江愛結

Attachment

Syntax Help

URL Link

Page Link

Image or Attachment

Text Decoration

Special Letter

Headline

Itemize

Enumerate

Table

Description

Quotation

Preformatted text