Soumettre la recherche
Mettre en ligne
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
•
0 j'aime
•
1,476 vues
Takuya Mukohira
Suivre
苫小牧高専 ソフトウェアテクノロジー部 新入生向けの資料です。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 60
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
【初心者向け】Unity StartUp講座
【初心者向け】Unity StartUp講座
SeraphMackintosh
Prottで変える開発プロセス
Prottで変える開発プロセス
Takumi Kai
UE4 3Dゲーム制作入門 その1 : ベースプロジェクト作成編
UE4 3Dゲーム制作入門 その1 : ベースプロジェクト作成編
PaperSloth
50分でわかるブループリントについて
50分でわかるブループリントについて
Masahiko Nakamura
みるみらができるまで2
みるみらができるまで2
tetu_fs
最近のUIデザインプロセス
最近のUIデザインプロセス
Shingo Katsushima
【Unity道場スペシャル 2018仙台】Unityでステージをつくるのじゃ
【Unity道場スペシャル 2018仙台】Unityでステージをつくるのじゃ
Unity Technologies Japan K.K.
ゲーム開発講座1
ゲーム開発講座1
takanori uoi
Recommandé
【初心者向け】Unity StartUp講座
【初心者向け】Unity StartUp講座
SeraphMackintosh
Prottで変える開発プロセス
Prottで変える開発プロセス
Takumi Kai
UE4 3Dゲーム制作入門 その1 : ベースプロジェクト作成編
UE4 3Dゲーム制作入門 その1 : ベースプロジェクト作成編
PaperSloth
50分でわかるブループリントについて
50分でわかるブループリントについて
Masahiko Nakamura
みるみらができるまで2
みるみらができるまで2
tetu_fs
最近のUIデザインプロセス
最近のUIデザインプロセス
Shingo Katsushima
【Unity道場スペシャル 2018仙台】Unityでステージをつくるのじゃ
【Unity道場スペシャル 2018仙台】Unityでステージをつくるのじゃ
Unity Technologies Japan K.K.
ゲーム開発講座1
ゲーム開発講座1
takanori uoi
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 2
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 2
Takuya Mukohira
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 3
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 3
Takuya Mukohira
苫小牧高専 ソフトウェアテクノロジー部 Rubyで遊ぼう 1
苫小牧高専 ソフトウェアテクノロジー部 Rubyで遊ぼう 1
Takuya Mukohira
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4
Takuya Mukohira
ブログ駆動人生 - 高専生のキャリアについて考える会(20150823)
ブログ駆動人生 - 高専生のキャリアについて考える会(20150823)
Takuya Mukohira
Global Game Jam Sapporo 2016 参加記 - Josho.LT
Global Game Jam Sapporo 2016 参加記 - Josho.LT
Takuya Mukohira
第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」
第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」
Takuya Mukohira
[DENX LT]ゲーム制作はじめよう
[DENX LT]ゲーム制作はじめよう
Doshisha Univ.
C#でアプリを作ってみよう! #ngtnet
C#でアプリを作ってみよう! #ngtnet
将 高野
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
Wankuma0402
Wankuma0402
c-mitsuba
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだこと
Katsutoshi Makino
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
Yuki Tanaka
息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)
Hiromichi Yamada
SurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみる
Tatsuya Matsumoto
【Unity道場 建築スペシャル】はじめてのUnity
【Unity道場 建築スペシャル】はじめてのUnity
Unity Technologies Japan K.K.
はじめてのUnity教室 講義用ppt
はじめてのUnity教室 講義用ppt
Taro Takano
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
Toshio Ehara
勝つための計画づくり 20110415(鈴木)
勝つための計画づくり 20110415(鈴木)
Atsushi Suzuki
ゲームジャム対策集中講座 ~よくある問題と対策~
ゲームジャム対策集中講座 ~よくある問題と対策~
Yasuyuki Kamata
DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
Unity Technologies Japan K.K.
【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
Unite2017Tokyo
Contenu connexe
En vedette
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 2
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 2
Takuya Mukohira
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 3
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 3
Takuya Mukohira
苫小牧高専 ソフトウェアテクノロジー部 Rubyで遊ぼう 1
苫小牧高専 ソフトウェアテクノロジー部 Rubyで遊ぼう 1
Takuya Mukohira
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4
Takuya Mukohira
ブログ駆動人生 - 高専生のキャリアについて考える会(20150823)
ブログ駆動人生 - 高専生のキャリアについて考える会(20150823)
Takuya Mukohira
Global Game Jam Sapporo 2016 参加記 - Josho.LT
Global Game Jam Sapporo 2016 参加記 - Josho.LT
Takuya Mukohira
第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」
第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」
Takuya Mukohira
En vedette
(7)
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 2
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 2
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 3
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 3
苫小牧高専 ソフトウェアテクノロジー部 Rubyで遊ぼう 1
苫小牧高専 ソフトウェアテクノロジー部 Rubyで遊ぼう 1
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4
ブログ駆動人生 - 高専生のキャリアについて考える会(20150823)
ブログ駆動人生 - 高専生のキャリアについて考える会(20150823)
Global Game Jam Sapporo 2016 参加記 - Josho.LT
Global Game Jam Sapporo 2016 参加記 - Josho.LT
第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」
第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」
Similaire à 苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
[DENX LT]ゲーム制作はじめよう
[DENX LT]ゲーム制作はじめよう
Doshisha Univ.
C#でアプリを作ってみよう! #ngtnet
C#でアプリを作ってみよう! #ngtnet
将 高野
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
Wankuma0402
Wankuma0402
c-mitsuba
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだこと
Katsutoshi Makino
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
Yuki Tanaka
息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)
Hiromichi Yamada
SurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみる
Tatsuya Matsumoto
【Unity道場 建築スペシャル】はじめてのUnity
【Unity道場 建築スペシャル】はじめてのUnity
Unity Technologies Japan K.K.
はじめてのUnity教室 講義用ppt
はじめてのUnity教室 講義用ppt
Taro Takano
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
Toshio Ehara
勝つための計画づくり 20110415(鈴木)
勝つための計画づくり 20110415(鈴木)
Atsushi Suzuki
ゲームジャム対策集中講座 ~よくある問題と対策~
ゲームジャム対策集中講座 ~よくある問題と対策~
Yasuyuki Kamata
DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
Unity Technologies Japan K.K.
【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
Unite2017Tokyo
クラーク創立25周年記念文化祭 秋葉原Ga専攻
クラーク創立25周年記念文化祭 秋葉原Ga専攻
Kentaro Abe
ハードウェアを用いてPythonを学ぶ
ハードウェアを用いてPythonを学ぶ
Yuta Kitagami
Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06
Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06
Akira Hatsune
「オリジナル時計」事前課題用テキスト
「オリジナル時計」事前課題用テキスト
Tairo Moriyama
第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?
Shunya Komori
Similaire à 苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
(20)
[DENX LT]ゲーム制作はじめよう
[DENX LT]ゲーム制作はじめよう
C#でアプリを作ってみよう! #ngtnet
C#でアプリを作ってみよう! #ngtnet
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Wankuma0402
Wankuma0402
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだこと
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)
SurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみる
【Unity道場 建築スペシャル】はじめてのUnity
【Unity道場 建築スペシャル】はじめてのUnity
はじめてのUnity教室 講義用ppt
はじめてのUnity教室 講義用ppt
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
勝つための計画づくり 20110415(鈴木)
勝つための計画づくり 20110415(鈴木)
ゲームジャム対策集中講座 ~よくある問題と対策~
ゲームジャム対策集中講座 ~よくある問題と対策~
DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
クラーク創立25周年記念文化祭 秋葉原Ga専攻
クラーク創立25周年記念文化祭 秋葉原Ga専攻
ハードウェアを用いてPythonを学ぶ
ハードウェアを用いてPythonを学ぶ
Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06
Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06
「オリジナル時計」事前課題用テキスト
「オリジナル時計」事前課題用テキスト
第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?
Plus de Takuya Mukohira
2015年度苫小牧高専情報工学科 学外実習発表会 発表資料
2015年度苫小牧高専情報工学科 学外実習発表会 発表資料
Takuya Mukohira
向平卓矢について - 2015/12/23 ITエンジニア高専 逆求人
向平卓矢について - 2015/12/23 ITエンジニア高専 逆求人
Takuya Mukohira
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 5
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 5
Takuya Mukohira
Web APIを使って生活を便利にしたい件
Web APIを使って生活を便利にしたい件
Takuya Mukohira
開発の道具についてのお話 LOUPE Study #15
開発の道具についてのお話 LOUPE Study #15
Takuya Mukohira
やってみようCHaser - LOUPE Study #7
やってみようCHaser - LOUPE Study #7
Takuya Mukohira
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
Takuya Mukohira
Nokogiri on Rails
Nokogiri on Rails
Takuya Mukohira
第4回 釧路OSS札幌 勉強会「自己紹介LT」 #946oss札幌
第4回 釧路OSS札幌 勉強会「自己紹介LT」 #946oss札幌
Takuya Mukohira
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
Takuya Mukohira
LT Kosenconf946 #2
LT Kosenconf946 #2
Takuya Mukohira
学校にギークっぽい集団を作ってみたかった Kosenconf946 #2
学校にギークっぽい集団を作ってみたかった Kosenconf946 #2
Takuya Mukohira
120811高専カンファin旭川 ふるさと自慢(千歳と恵庭)
120811高専カンファin旭川 ふるさと自慢(千歳と恵庭)
Takuya Mukohira
Plus de Takuya Mukohira
(13)
2015年度苫小牧高専情報工学科 学外実習発表会 発表資料
2015年度苫小牧高専情報工学科 学外実習発表会 発表資料
向平卓矢について - 2015/12/23 ITエンジニア高専 逆求人
向平卓矢について - 2015/12/23 ITエンジニア高専 逆求人
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 5
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 5
Web APIを使って生活を便利にしたい件
Web APIを使って生活を便利にしたい件
開発の道具についてのお話 LOUPE Study #15
開発の道具についてのお話 LOUPE Study #15
やってみようCHaser - LOUPE Study #7
やってみようCHaser - LOUPE Study #7
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
Nokogiri on Rails
Nokogiri on Rails
第4回 釧路OSS札幌 勉強会「自己紹介LT」 #946oss札幌
第4回 釧路OSS札幌 勉強会「自己紹介LT」 #946oss札幌
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
LT Kosenconf946 #2
LT Kosenconf946 #2
学校にギークっぽい集団を作ってみたかった Kosenconf946 #2
学校にギークっぽい集団を作ってみたかった Kosenconf946 #2
120811高専カンファin旭川 ふるさと自慢(千歳と恵庭)
120811高専カンファin旭川 ふるさと自慢(千歳と恵庭)
Dernier
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Dernier
(9)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
1.
テーマ1 enchant.js で ゲーム作り (1) 2015/04/13 苫小牧高専
ソフトウェアテクノロジー部 新人研修
2.
前回のまとめ
3.
ソフテクについて • ソフトウェアテクノロジー部。 プロコン班とETロボコン班に分かれる。 • 1年生は、プロコン・ETロボコン班関係なく、 「プログラミングでものを作る」感覚を掴んでもらうことに する。 •
1、2ヶ月くらいの短いスパンで、 いろいろなテーマに触れる。 • 毎週火曜日 15時40分から情報棟3階 システム実習室に集合!
4.
enchant.jsについて • 2Dゲームを作るためのフレームワーク( 便利ツー ルキット)。 •
Javascriptというプログラミング言語で書く。 • 9leapというプログラミングコンテストが 開催されている。
5.
開発に必要なツールについて • enchant.js本体 あとで配る。 • エディタ TeraPadを使います。 (好みのものがあればそれでOK) •
ブラウザ Internet Exproler 11(学校のPCに入っている)
6.
今日のテーマ 「画像を動かしてみる」
7.
必要なもの配布
8.
必要なもの配布 • USBメモリに入っている、 softech_01
というフォルダをコピー • 自分のをコピーしたら隣の人へ。
9.
必要なもの配布
10.
必要なもの配布 softech_01/ - chara1.png - enchan.js -
index.html - main.js
11.
必要なもの配布 softech_01/ - chara1.png - enchan.js -
index.html - main.js ← クマさんの画像 ← enchant.js本体 ← ブラウザで開くページ ← これにゲームを書いていく
12.
ゲームの構造
13.
ブラウザで開くファイル index.html
14.
ブラウザで開くファイル index.html ↓ ページのタイトルを変えてみよう
15.
さっそくコードを 書いていきます
16.
さっそく コードを書いていきます • 「習うより慣れろ」ということで、 まずはスライドのコードを写す。 • 必要なところは説明するし、わからなくてもゲーム 作りを楽しめそうなところについては説明しません。 •
難しい文法がどうこうよりも、まずは「手を動かし てゲームを作る」ことを楽しもう!
17.
ゲーム本体 main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.onload = function() { } core.start(); }
18.
ゲーム本体 main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.onload = function() { } core.start(); } ← ゲームのCore(核)となる部分 ここに処理を書いていく。 ← ゲームスタート! ← enchant.js を使うためのおまじない。
19.
画像を表示する ∼クマさん現る∼
20.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); } core.start(); }
21.
クマさん現る!
22.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); } core.start(); } ← ① ← ② ← ③ ← ④ ← ⑤
23.
画像を表示するには 1.画像を読み込む。 core.preload( chara1.png ); 2.変数を定義する。 var
bear = Sprite(); 3.ファイル名を指定する。 bear.image = core.assets[ chara1.png ]; 4.座標を指定する。 bear.x = 0; bear.y = 0; 5.bearをシーンに追加する。 core.rootScene.addChild(bear);
24.
1.画像を読み込む • enchant.jsのゲームで画像を使うには、先に読み込 んでおく(→ preloadする)必要がある。 core.preload(
file_name.png ); • 読み込んだ画像は、 core.assets[ file_name.png ]; で使うことができる。
25.
2.変数を定義する • 変数とは、プログラムの中で値(数、文字、文字列、キャ ラクターなど)を入れておくための箱のようなもの。 • Javascriptでは、varを使って定義する。 var
name = Mukohira Takuya ; var age = 19; • 値には種類があり、プログラムでは型という。 19 → 整数型(int型) Takuya Mukohira → 文字列型 他にもいくつかある。
26.
2.変数を定義する • enchant.jsでは、 画像を扱うために少し変わった変数の定義をする。 var bear
= Sprite(); • これで、 Sprite型の変数bearが定義されたことになる。 • 詳しいことは学習していくうちにわかる(と思う) ので、今はあまり深く突っ込まないことにする。
27.
2.変数を定義する • Sprite型の変数は、内部に様々なデータを持ってい る。 • そのデータには、 bear.image,
bear.x などと記述して操作することができる。
28.
3.ファイル名を指定する • Sprite型の変数bearに、どの画像を割り当てるか を指定する。 bear.image =
core.assets[ chara1.png ]; • 使用したい画像は必ず preload しておくこと。
29.
4.座標を指定する • Sprite型の変数bearは、座標のデータを持ってい て、X座標、Y座標をそれぞれ bear.x, bear.y
と格納されている。 • bear.x = 0; bear.y = 0; とコードを書くことで、 bearの座標を(0, 0)に設定できる。
30.
5.シーンにbearを追加する • enchant.jsには、シーンという概念がある。 • 定義した変数を表示するには、画像や座標を指定し たあとに、シーンに追加しなければならない。 core.rootScene.addChild(bear);
31.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); } core.start(); } ← ① 画像を読み込む ← ② 変数を定義する ← ③ ファイル名を指定する ← ④ 座標を指定する ← ⑤ シーンにbearを追加する
32.
クマさん現る!
33.
課題1
34.
課題1 1. クマさんの位置をずらしてみよう。 2. クマさんをもう一体表示してみよう。
35.
まとめ • ゲームは、 • ゲーム画面に画像を表示するには、Sprite()を使っ て変数を作る。 •
Sprite() で作った変数は
36.
37.
画像を動かす こいつ…動くぞ!?
38.
「イベント」という 概念について
39.
プログラミングにおける 「イベント」とは • プログラム中で起こる何らかの出来事。 • マウスが動いた
/ マウス左クリックされた / ボタ ンが押された / 矢印キーが押された / 15時になっ た … などなど
40.
ゲームプログラミングでの イベント処理 • 普通、プログラムは上から順に実行される。 • 加えてゲームプログラミングでは、「あるイベント が発生した時のみ実行する処理」がよく出てくる。 •
今回は、 「フレームが進んだ時」 というイベント を検知し、処理を行う。
41.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); bear.addEventListener('enterframe', function() { this.x += 3; }); } core.start(); }
42.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); bear.addEventListener('enterframe', function() { this.x += 3; }); } core.start(); } ← ① ← ②
43.
イベントに対する処理 の書き方 • ゲームが開始されてから、フレームが1秒に60回進んでいく(60fps) • 今回のイベントは、「フレームが進んだ時」。 •
bear.addEventListener( enterframe , function(){ bear.x += 3; }); enterframe(フレームが進む)ごとに、 function(){}の中身を実行するという意味。 • function(){}の中には、bear.x += 3;が書いてある。 bear.x += 3; は、「bear.x(bearのX座標)へ3加える。」という意味。 • bear.x += 3; 以外の部分はおまじないとして覚えておくが吉。
44.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); bear.addEventListener('enterframe', function() { this.x += 3; }); } core.start(); } ← ① フレームが進むごとに実行する (おまじない) ← ② bearのX座標を 3進める
45.
クマさん動く!
46.
47.
画像をいろいろ動かす 回転させたり、拡大させたり
48.
bearを 操作することができる • bear.scaleや、bear.rotateのように、bear.○○ で 色々な動作を実現できる。
49.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); bear.addEventListener('enterframe', function() { this.x += 3; }); } core.start(); } ← フレームが進むごとに実行したい処理は この中に書いていく。
50.
クマさん回転 bear.rotate(2);
51.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); bear.addEventListener('enterframe', function() { this.x += 3; this.rotate(2); }); } core.start(); }
52.
クマさん巨大化 bear.scale(1.01, 1.01);
53.
main.js enchant(); window.onload = function()
{ var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); bear.addEventListener('enterframe', function() { this.x += 3; this.scale(1.01, 1.02); }); } core.start(); }
54.
図1.回転しながら巨大化していく不審物
55.
ここで問題
56.
クマさん端っこで消える問題
57.
クマさん端っこで消える問題 • core、つまりゲームの画面サイズは 320
x 320 • bear.x が 320 を超えると、消えてしまう。
58.
どうすれば良いと思う?
59.
クマさん端っこで消える問題 • bear.x が
320を超えた時、 bear.xを0にリセットすれば良いのでは?
60.
続きは次回!
Télécharger maintenant