Submit Search
Upload
Creators'night#12今井
•
0 likes
•
470 views
Daisuke Imai
Follow
Creators'night#12のLT資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 44
Download now
Download to read offline
Recommended
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
enchant.js meetup Tokyo vol.2 Tutorial
enchant.js meetup Tokyo vol.2 Tutorial
Ryo Shimizu
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
Daisuke Imai
ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方
silvers ofsilvers
Creators'night#14今井
Creators'night#14今井
Daisuke Imai
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
Recommended
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
enchant.js meetup Tokyo vol.2 Tutorial
enchant.js meetup Tokyo vol.2 Tutorial
Ryo Shimizu
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
Daisuke Imai
ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方
silvers ofsilvers
Creators'night#14今井
Creators'night#14今井
Daisuke Imai
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
Masayuki Maekawa
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
MT meets PHP
MT meets PHP
純生 野田
モテる JavaScript
モテる JavaScript
Osamu Monoe
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
Jqm20120210
Jqm20120210
cmtomoda
Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
Alpine.jsハンズオン
Alpine.jsハンズオン
AyakaNishiyama
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Inside Movable Type
Inside Movable Type
純生 野田
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
純生 野田
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
swooleを試してみた
swooleを試してみた
Yukihiro Katsumi
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
何が変わった JavaFX 2.0
何が変わった JavaFX 2.0
Yuichi Sakuraba
Arctic.js
Arctic.js
chikathreesix
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
enchant.js勉強会
enchant.js勉強会
Hiroaki Murayama
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう
Ryota Shiroguchi
More Related Content
What's hot
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
Masayuki Maekawa
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
MT meets PHP
MT meets PHP
純生 野田
モテる JavaScript
モテる JavaScript
Osamu Monoe
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
Jqm20120210
Jqm20120210
cmtomoda
Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
Alpine.jsハンズオン
Alpine.jsハンズオン
AyakaNishiyama
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Inside Movable Type
Inside Movable Type
純生 野田
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
純生 野田
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
swooleを試してみた
swooleを試してみた
Yukihiro Katsumi
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
何が変わった JavaFX 2.0
何が変わった JavaFX 2.0
Yuichi Sakuraba
What's hot
(18)
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
Aaなゲームをjsで
Aaなゲームをjsで
MT meets PHP
MT meets PHP
モテる JavaScript
モテる JavaScript
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
Jqm20120210
Jqm20120210
Canvas勉強会
Canvas勉強会
HTML5 on ASP.NET
HTML5 on ASP.NET
Alpine.jsハンズオン
Alpine.jsハンズオン
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Inside Movable Type
Inside Movable Type
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
swooleを試してみた
swooleを試してみた
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
何が変わった JavaFX 2.0
何が変わった JavaFX 2.0
Similar to Creators'night#12今井
Arctic.js
Arctic.js
chikathreesix
Aaなゲームをjsで
Aaなゲームをjsで
Moriyoshi Koizumi
enchant.js勉強会
enchant.js勉強会
Hiroaki Murayama
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう
Ryota Shiroguchi
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
Ryota Shiroguchi
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
Yusuke HIDESHIMA
2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d
Hiroshi Oyamada
Siv3Dで楽しむゲームとメディアアート開発
Siv3Dで楽しむゲームとメディアアート開発
Ryo Suzuki
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
Yohei Munesada
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
ScaLa+Liftとか
ScaLa+Liftとか
youku
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Tomoaki Shimizu
Ember.js Tokyo event 2014/09/22 (Japanese)
Ember.js Tokyo event 2014/09/22 (Japanese)
Yuki Shimada
Canvas de shooting 制作のポイント
Canvas de shooting 制作のポイント
Yohei Munesada
Sencha ug3 siesta_share
Sencha ug3 siesta_share
久司 中村
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com
Kenta Tsuji
Sencha study
Sencha study
Shinsuke Sugita
Similar to Creators'night#12今井
(20)
Arctic.js
Arctic.js
Aaなゲームをjsで
Aaなゲームをjsで
enchant.js勉強会
enchant.js勉強会
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d
Siv3Dで楽しむゲームとメディアアート開発
Siv3Dで楽しむゲームとメディアアート開発
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
ScaLa+Liftとか
ScaLa+Liftとか
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Ember.js Tokyo event 2014/09/22 (Japanese)
Ember.js Tokyo event 2014/09/22 (Japanese)
Canvas de shooting 制作のポイント
Canvas de shooting 制作のポイント
Sencha ug3 siesta_share
Sencha ug3 siesta_share
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com
Sencha study
Sencha study
More from Daisuke Imai
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
Daisuke Imai
デブコミュ#20150312
デブコミュ#20150312
Daisuke Imai
Creators'night#15今井
Creators'night#15今井
Daisuke Imai
Creators'night#10今井
Creators'night#10今井
Daisuke Imai
Creators'night#8今井
Creators'night#8今井
Daisuke Imai
Creators'night#7今井
Creators'night#7今井
Daisuke Imai
Creators'night#6今井
Creators'night#6今井
Daisuke Imai
Creators'night#5今井
Creators'night#5今井
Daisuke Imai
Creators'night#4今井
Creators'night#4今井
Daisuke Imai
Creators'night#3今井
Creators'night#3今井
Daisuke Imai
Creators'night#1今井
Creators'night#1今井
Daisuke Imai
UI研究会#2
UI研究会#2
Daisuke Imai
UI研究会#3
UI研究会#3
Daisuke Imai
Beenos creators'night#201308今井
Beenos creators'night#201308今井
Daisuke Imai
Beenos creators'night#201307今井
Beenos creators'night#201307今井
Daisuke Imai
Ui研究会#1
Ui研究会#1
Daisuke Imai
Beenos creators' night#201305今井
Beenos creators' night#201305今井
Daisuke Imai
Beenos creators' night#201306今井
Beenos creators' night#201306今井
Daisuke Imai
パソナプレゼン資料
パソナプレゼン資料
Daisuke Imai
More from Daisuke Imai
(19)
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
デブコミュ#20150312
デブコミュ#20150312
Creators'night#15今井
Creators'night#15今井
Creators'night#10今井
Creators'night#10今井
Creators'night#8今井
Creators'night#8今井
Creators'night#7今井
Creators'night#7今井
Creators'night#6今井
Creators'night#6今井
Creators'night#5今井
Creators'night#5今井
Creators'night#4今井
Creators'night#4今井
Creators'night#3今井
Creators'night#3今井
Creators'night#1今井
Creators'night#1今井
UI研究会#2
UI研究会#2
UI研究会#3
UI研究会#3
Beenos creators'night#201308今井
Beenos creators'night#201308今井
Beenos creators'night#201307今井
Beenos creators'night#201307今井
Ui研究会#1
Ui研究会#1
Beenos creators' night#201305今井
Beenos creators' night#201305今井
Beenos creators' night#201306今井
Beenos creators' night#201306今井
パソナプレゼン資料
パソナプレゼン資料
Creators'night#12今井
1.
スマホアプリ作るまで続く 長期連載シリーズ
2.
父ちゃん、母ちゃん、 俺、 やっぱゲーム作りたい。 ※「俺」も「父ちゃん」も「母ちゃん」も普段使いません。
3.
ゲーム作りたいです。
4.
今回こそ再開
5.
久々にコード見たら…
6.
var deleteMode =
false; var lineNumber = lines.length; var scoreUp = 0; if (lineNumber >=2) { deleteMode = true; if (lineNumber == 2) { // 2つしかつながってない場合は減点 scoreUp = -50; } else { // 3つ以上つながっている場合の特典ルール scoreUp = 100 + (((tileVariation * 10) * (lines.length - 3)) * (lines.length - 3)); } // 得点のポップアップは最後に選択されたタイルの近くに出る var popTileX = lines[lineNumber - 1].boardX * TILE_SIZE + BOARD_OFFSETX; var popTileY = lines[lineNumber - 1].boardY * TILE_SIZE + BOARD_OFFSETY; var popTile = new PopTile(popTileX, popTileY, markedNumber, this); popTile.key = game.frame; popTiles[game.frame] = popTile; effectGroup.addChild(popTile); var popScoreX = (lines[lineNumber - 1].boardX + 1 / 2) * TILE_SIZE + BOARD_OFFSETX; var popScoreY = (lines[lineNumber - 1].boardY + 1 / 2) * TILE_SIZE + BOARD_OFFSETY; var popScore = new PopScore(popScoreX, popScoreY, scoreUp, this); popScore.key = game.frame; popScores[game.frame] = popScore; effectGroup.addChild(popScore.numberSprite); stageScore += scoreUp; barValues[markedNumber] += lineNumber; } lineMode = false; for(var i in lines) { if (deleteMode === true) { boardData[lines[i].boardY][lines[i].boardX] = 0; } markedData[lines[i].boardY][lines[i].boardX] = 0; lineGroup.removeChild(lines[i]); lines[i].remove(); } lines = []; } } }); // ライン var lines = []; var Line = enchant.Class.create(enchant.Sprite, { initialize: function(boardX, boardY, recentBoardX, recentBoardY, lineNumber) { this.boardX = boardX; this.boardY = boardY; this.lineNumber = lineNumber; enchant.Sprite.call(this, LINE_SIZE, LINE_SIZE); this.image = game.assets['images/lines.png']; if (lineNumber === 0) { this.frame = 0; this.x = boardX * TILE_SIZE + ((TILE_SIZE - LINE_SIZE) / 2) + BOARD_OFFSETX;
7.
全く思い出せん…
8.
リハビリが必要だ
9.
で、ネットで見ちゃったですよ。
10.
11.
CREATEJS
12.
Adobeとか Microsoftとかが スポンサーしてるんだって。
13.
∼ The road
to a game developer 番外編∼ 「CREATEJSに浮気してみた」 ネットプライスドットコム NPLab. いまい大すけ
14.
CREATEJS A suite of
Javascript libraries & tools for building rich, interactive experiences with HTML5.
15.
EaselJS TweenJS SoundJS PreloadJS の4つのライブラリ
16.
EaselJS Canvas描画ライブラリ
17.
TweenJS アニメーションライブラリ
18.
SoundJS 音関連のライブラリ
19.
PreloadJS 素材のプリローダー
20.
enchant.jsとの比較
21.
サイズ 47.23KB 計92.08KB (53.79KB) 描画 divごと (2.0でcanvasに) canvas上 メインループ タイムベース (自動) タイムベース (手動) ブラウザ対応 ある程度 (IEは無視) 自分でやれ
22.
とりあえず作ってみるといえば
23.
24.
クマちゃん in the
sky http://jsdo.it/hine.gdw/ySJu
25.
ゲームプログラム初心者に 1日で作ってもらう課題として enchantで昔作ったゲーム。
26.
ゲームの内容は 「バルーントリップ」 的なもの
27.
ってことで作りました。
28.
29.
主人公はenchant.jsの エンちゃん
30.
エンちゃん in the
sky http://jsdo.it/hine.gdw/hUUB
31.
全部で4時間くらい
32.
感想
33.
【良い所】 アニメーション使いやすい 結構速い Canvas関連使いやすい
34.
【悪い所】 ・Canvas拡縮ない(と思う) ・オブジェクトのwidth、height 等のメンバー変数がない! ・描画オブジェクトのクリック操 作とか困難
35.
【enchantの良い所】 ・スプライトの当たり判定 ・mapオブジェクト ・タッチイベントに標準で対応 ・プラグイン ・画像素材が提供されている
36.
でも、 基本的にJSなので、 方言レベルの差しかない。
37.
Spriteを表示するまでの 最低限の記述
38.
<!DOCTYPE html> <html>
<head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8" /> <script type="text/javascript" src="./enchant.js"></script> <script type="text/javascript"> enchant(); window.onload = function() { var game = new Game(320,320); game.preload('a.png'); game.onload = function() { var test = new Sprite(100,100); test.x = 10; test.y = 10; test.image = game.assets['a.png']; game.rootScene.addChild(test); }; game.start(); }; </script> </head> <body> </body> </html>
39.
<!DOCTYPE html> <html>
<head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8" /> <script type="text/javascript" src="./easel.js"></script> <script type="text/javascript"> var canvas, stage; function init() { canvas = document.get.ElementById(“testCanvas”); stage = new createjs.Stage(canvas); img = new Image(canvas); img.src = “a.png”; img.onload = function() { var ss = new createjs.SpriteSheet({ images: [img], frames: {width:100, height:100, regX:0, regY:0}, animations: {stand: [0]} }); var test = new createjs.BitmapAnimation(ss); test.x = 10; test.y = 10; test.gotoAndPlay(“stand”); stage.addChild(test); stage.update(); }; }; </script> </head> <body onload="init();" > <canvas id="testCanvas" width=”320” height=”320”></canvas> </body> </html>
40.
CreateJSの方が ちょっと長い
41.
【その他】 ・Flash CS6から書き出し可 ・日本語ドキュメントなし ・まだ本も出てないみたい
42.
enchant.jsで 便利だと思う機能を パクって実装しちゃえば いいと思うんだ。
43.
次回こそは メインのゲームを進める 多分、CREATEJSで
44.
ご清聴 ありがとうございました。
Download now