皆さんこんにちは。入社２年目エンジニアのうめざわです。
日に日に近所でも例のウイルスのニュースを耳にするようになり、より一層体調管理に気を付けないといけないなと考えている今日この頃です。
さて、今回は私が１年目に担当した案件の中から１案件をピックアップさせていただき、難しかった点やこだわった点などについてご紹介させていただきたいと思います。
案件のご紹介
ピックアップさせていただくのは、エンジニアのにしかわと私うめざわが実装を担当させていただいた、
共和産業株式会社様のスペシャルアニメーションサイト
「こんなところに共和産業」です。
共和産業株式会社様は、建設機械、農業機械、産業機械などのキャビンを製作する専業のメーカーです。
今回の案件では、共和産業株式会社様が製作されたキャビンが、どういったところで使用されているのかを紹介するためのアニメーションサイトでした。
担当箇所
こちらのサイトはcanvasのアニメーションで実装しています。
デザイン、イラストは他社様にご支給いただきました。
実装では基礎のアニメーションの設定部分はにしかわが担当し、パーツの配置や実際のアニメーション作成は私うめざわが担当させていただきました。
難しかった点
◆レイヤー構造
こちらのサイトでは、島、道路、木、建物、乗り物などの全てのパーツを１つ１つバラバラにして配置しています。
当然ですが車がトンネルをくぐる際、トンネルは車より手前になくてはなりません。
全てのイラストを立体的に考える作業が初体験だったこともあり、かなり勉強になりました。
◆パラパラ漫画と動きの連動
重機などの動きはパラパラ漫画の要領で、画像の表示非表示を切り替えることで実装しています。
また、移動は座標と秒数を設定することで実装しています。
そのため、パラパラ漫画の動きと座標移動の動きがずれないように慎重に秒数を合わせる作業が必要になりました。
◆その他
あとは細かい部分ですが、交差点などで交通事故が起きないよう車の移動・停止などに配慮しました。
最後に
今回は、共和産業株式会社様の案件を１例に振り返ってみました。
私は専門学校を卒業して入社しましたが、学校ではほとんどJavaScriptなどは習っていなかったため、いろいろな案件を通して少しずつ勉強をしています。
入社してから早１年、本当にあっという間に時が過ぎ去ってしまったなという感想です。
後輩もでき、社会人として、もちろんエンジニアとしてもより一層成長していきたいと思っています。
それでは。
