Top Banner
Ubiquitous Entertainment Inc. 111130日水曜日
111

enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Apr 16, 2017

Download

Technology

wise9
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Ubiquitous Entertainment Inc.

11年11月30日水曜日

Page 2: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 3: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

enchant.jsを使ったいろいろなハックの紹介

11年11月30日水曜日

Page 4: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Physics Simulation物理シミュレーション

11年11月30日水曜日

Page 5: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

demo

11年11月30日水曜日

Page 6: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

PhySprite

PhySprite < Sprite

11年11月30日水曜日

Page 7: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Ruby on enchant.js

11年11月30日水曜日

Page 8: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Ruby on enchant.js

compileRuby.cgi

HotRuby.js(Custom)

enchant.jsRuby Code

Ruby 1.9.0

Web Server

Web Browser

Compile to YARV code

Running YARV codeon HTML5

11年11月30日水曜日

Page 9: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

HTML5 with Ruby code

class Effect < Sprite def initialize (x,y) super(16,16) self.image = Game.assets("kirakira.gif") self.frame=0 self.x = x+16 self.y = y+8 self.scaleX=2 self.scaleY=2 $group.addChild(self) @mode = 0 end def enterframe if Game.frame%4 < 3 return end self.frame += 1 if self.frame >= 4 destroy end endend

Extend from Sprite class

Define event listener

11年11月30日水曜日

Page 10: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

demo

11年11月30日水曜日

Page 11: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Canvasを使った半透明処理

11年11月30日水曜日

Page 12: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

scr = new Sprite(320,320); surface = new Surface(320,320); scr.image=surface; scr.image.draw(game.assets['bg.png']);

ctx = surface.context;

ctx.beginPath();

ctx.arc(x,y, r, 0, Math.PI*2, false); ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fill();

11年11月30日水曜日

Page 13: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

scr = new Sprite(320,320); surface = new Surface(320,320); scr.image=surface; scr.image.draw(game.assets['bg.png']);

ctx = surface.context;

ctx.beginPath();

ctx.arc(x,y, r, 0, Math.PI*2, false); ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fill();

Surfaceを作る

11年11月30日水曜日

Page 14: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

scr = new Sprite(320,320); surface = new Surface(320,320); scr.image=surface; scr.image.draw(game.assets['bg.png']);

ctx = surface.context;

ctx.beginPath();

ctx.arc(x,y, r, 0, Math.PI*2, false); ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fill();

Surfaceを作る

直接イメージを描画可能

11年11月30日水曜日

Page 15: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

scr = new Sprite(320,320); surface = new Surface(320,320); scr.image=surface; scr.image.draw(game.assets['bg.png']);

ctx = surface.context;

ctx.beginPath();

ctx.arc(x,y, r, 0, Math.PI*2, false); ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fill();

Surfaceを作る

直接イメージを描画可能

Canvasのコンテキストを取得

11年11月30日水曜日

Page 16: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

scr = new Sprite(320,320); surface = new Surface(320,320); scr.image=surface; scr.image.draw(game.assets['bg.png']);

ctx = surface.context;

ctx.beginPath();

ctx.arc(x,y, r, 0, Math.PI*2, false); ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fill();

Surfaceを作る

直接イメージを描画可能

Canvasのコンテキストを取得

アルファ付きで色指定できる

11年11月30日水曜日

Page 17: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

demo

11年11月30日水曜日

Page 18: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

AR Game

11年11月30日水曜日

Page 19: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

AR 認識エンジン搭載OpenGL ES対応

音声、マルチタッチサポート

11年11月30日水曜日

Page 20: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

AR Market Recognize and Manipulate from JavaScript

11年11月30日水曜日

Page 21: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Integrated 3D Scene GraphSupports for OpenGL/WebGL

11年11月30日水曜日

Page 22: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Only 30 lines to manipulateAR tag and drawing 3D Model!

11年11月30日水曜日

Page 23: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

お仕事×enchant.js

11年11月30日水曜日

Page 24: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

ふつうのOLが二人で作成

11年11月30日水曜日

Page 25: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

社内情報セキュリティ研修用ゲーム11年11月30日水曜日

Page 26: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

趣味からお仕事まで

11年11月30日水曜日

Page 27: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 28: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Ubiquitous Entertainment Inc.

11年11月30日水曜日

Page 29: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Roadmap

11年11月30日水曜日

Page 30: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

2003年創業資本金:2億9000万円資本準備金(2億7300万円)従業員:100人(正社員70人+学生30人)

11年11月30日水曜日

Page 31: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Solution Contents Researchソリューションビジネス部 コンテンツビジネス部 秋葉原リサーチセンター

研究開発部

取締役会

社長

組織図

11年11月30日水曜日

Page 32: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Solution Contents Researchソリューションビジネス部 コンテンツビジネス部 秋葉原リサーチセンター

研究開発部

取締役会

社長

組織図

11年11月30日水曜日

Page 33: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Solution Contents Researchソリューションビジネス部 コンテンツビジネス部 秋葉原リサーチセンター

研究開発部

取締役会

社長

組織図 社長直轄の研究部門

11年11月30日水曜日

Page 34: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

今年度から新卒募集開始会社説明会は12月21日

場所は浅草花屋敷

詳細は9月5日のリクナビを参照

11年11月30日水曜日

Page 35: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

中途採用も受付中!

詳細はリクナビNEXTにて

11年11月30日水曜日

Page 36: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 37: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

docomo Palette UI

11年11月30日水曜日

Page 38: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

ZeptoPad Folio

����������

��

����� �

����

11年11月30日水曜日

Page 39: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 40: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 41: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

今 日僕 た ち が伝 え た いメッセージ

11年11月30日水曜日

Page 42: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

プログラミングは最高だってこと

11年11月30日水曜日

Page 43: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

これからプログラミングを勉強したいと思うなら最適なものがひとつある

11年11月30日水曜日

Page 44: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 45: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

2014年にHTML5が正式に策定される予定

11年11月30日水曜日

Page 46: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

スマートフォンにおける

HTML5は、

ケータイのFlash Liteと同じかそれ以上の位置づけとなる

11年11月30日水曜日

Page 47: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

つまりHTML5を制する者

だけが未来への切符を

手にすることができる

11年11月30日水曜日

Page 48: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

だから

11年11月30日水曜日

Page 49: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

これからの予定2011 11月28日リアルタイム通信ゲーム対応9leapに通信サーバを設置

2011 12月中旬enchant PRO for iPhoneリリースenchant.js / WebGL対応(β)

11年11月30日水曜日

Page 50: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

開発中のもの物理シミュレーションプラグイン- Box2Dをベースに書き直し

PC環境向け3Dエンジン- WebGL対応

11年11月30日水曜日

Page 51: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

開発中のもの物理シミュレーションプラグイン- Box2Dをベースに書き直し

PC環境向け3Dエンジン- WebGL対応

その他、あなたのPullRequestを受付中!

11年11月30日水曜日

Page 52: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

開発中のものenchant.js本(初の公式本)

2012年2月頃発売予定!

(アスキーメディアワークスから!)

さらにもう一冊を夏頃予定

11年11月30日水曜日

Page 53: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

開発中のものenchant.js本(初の公式本)

2012年2月頃発売予定!

(アスキーメディアワークスから!)

さらにもう一冊を夏頃予定

その他、enchant.js本執筆者募集中!

http://9leap.net/info/inquiry

11年11月30日水曜日

Page 54: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

HTML5によるミニゲーム開発コンテスト

ナインリープ

11年11月30日水曜日

Page 55: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

47

Good Platform

Game Framework

Presentation and Achievement9leapは

HTML5によるゲーム開発を活発化していく!

11年11月30日水曜日

Page 56: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

ピアプロとクロスライセンスを締結初音ミクを始めとする素材が使えるようになりました自分で描いてピアプロに投稿して9leapで使ってもOK!

11年11月30日水曜日

Page 57: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

テラカワユス!!!

11年11月30日水曜日

Page 58: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

上位3名に選出されると・・・

シリコンバレー視察ツアーに招待!

11年11月30日水曜日

Page 59: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

ただし、本戦への参加資格は25歳以下の学生のみ

11年11月30日水曜日

Page 60: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

おいおい、大人にも参加させろ!

というご要望も多かったので

11年11月30日水曜日

Page 61: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

毎月9日間限定で大人も参加可能なコンテストも併催

11年11月30日水曜日

Page 62: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

してたんだけど

11年11月30日水曜日

Page 63: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

やっぱり忙しい社会人が9日間という短い期間にゲームを作るというのもけっこう大変みたいです

11年11月30日水曜日

Page 64: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

とはいえ趣味としての

ゲームプログラミングはもっと流行って欲しい

11年11月30日水曜日

Page 65: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

僕は爺さんになっても盆栽いじりじゃなくてゲーム作りをして老後を過ごしたい

11年11月30日水曜日

Page 66: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 67: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

ソースコードは

11年11月30日水曜日

Page 68: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

ソースコードは秘伝の味噌みたいなもの

11年11月30日水曜日

Page 69: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 70: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

enchant.jsで

11年11月30日水曜日

Page 71: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

enchant.jsでいろんなゲームを作ると

11年11月30日水曜日

Page 72: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

enchant.jsでいろんなゲームを作ると

いろんな味噌が

11年11月30日水曜日

Page 73: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

enchant.jsでいろんなゲームを作ると

いろんな味噌がたまって来た

11年11月30日水曜日

Page 74: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

制作時間:1時間制作人数:2人

11年11月30日水曜日

Page 75: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

制作時間:4時間制作人数:2人

11年11月30日水曜日

Page 76: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 77: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

かつてこれほどまでに

11年11月30日水曜日

Page 78: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

かつてこれほどまでに気軽に

11年11月30日水曜日

Page 79: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

かつてこれほどまでに気軽に簡単に

11年11月30日水曜日

Page 80: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

かつてこれほどまでに気軽に簡単に

ゲーム作りできたことが

11年11月30日水曜日

Page 81: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

かつてこれほどまでに気軽に簡単に

ゲーム作りできたことがあっただろうか!?

11年11月30日水曜日

Page 82: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

かつてこれほどまでに気軽に簡単に

ゲーム作りできたことがあっただろうか!?

いや、ない(反実仮想)11年11月30日水曜日

Page 83: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

もっと色んな人が面白いゲームを作ってオープンソースで使える

ようにすればもっと面白いゲームが出てくるんじゃないか

11年11月30日水曜日

Page 84: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

そこで

11年11月30日水曜日

Page 85: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

無差別級

11年11月30日水曜日

Page 86: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

社会人も参加できるミニゲーム開発コンテスト

を新たに開始します!

11年11月30日水曜日

Page 87: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

オ ー プ ン リ ー プ

11年11月30日水曜日

Page 88: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

学生でも社会人でも20歳以上ならエントリー可能テーマは自由ただし、ソースはMITライセンスで公開する

11年11月30日水曜日

Page 89: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

優勝賞金 50万円優秀賞 10万円奨励賞 1万円

11年11月30日水曜日

Page 90: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

第一回 11月1日~12月31日まで

奨励賞 1万円※10000プレイを獲得したゲームから先着10作品

(但し、同一プレイヤーのアクセスは1日1回のみカウント)

11年11月30日水曜日

Page 91: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

第一回 11月1日~12月31日まで

奨励賞 1万円※10000プレイを獲得したゲームから先着10作品

(但し、同一プレイヤーのアクセスは1日1回のみカウント)

も使用可能

11年11月30日水曜日

Page 92: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

さらに・・・

11年11月30日水曜日

Page 93: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

最終決勝戦

11年11月30日水曜日

Page 94: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

そして・・・

11年11月30日水曜日

Page 95: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

プログラミングを愛する全ての人のために

11年11月30日水曜日

Page 96: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

11年11月30日水曜日

Page 97: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

リ ー プ フ ェ ス ト

11年11月30日水曜日

Page 98: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

enchant.jsに限らず日本中からスゲえ

ハッカーとプログラマーを連れてきます!

11年11月30日水曜日

Page 99: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

2012/2/12@Akihabara

11年11月30日水曜日

Page 100: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

予定あけといてね!

11年11月30日水曜日

Page 101: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

我々の野望

11年11月30日水曜日

Page 102: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

プログラミングは楽しい!自分でプログラミングしたゲームで遊ぶのは格別の面白さ!

11年11月30日水曜日

Page 103: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

プログラミングは嬉しい!自分のゲームを家族や友達に遊んでもらったらとっても嬉しい!

11年11月30日水曜日

Page 104: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

プログラミングは素晴らしい!人類がかつて手にした中で最高の教材であり、コミュニケーション手段にもなる!

11年11月30日水曜日

Page 105: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

プログラミングはもうプロだけのものじゃない主婦や学生やOLやおじいさんみんながプログラミングを楽しめるようになれば

もっと世の中が楽しくなる!11年11月30日水曜日

Page 106: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

enchant.jsはプログラミングの面白さを誰もが手軽に楽しめる幸せな世界を作ります

11年11月30日水曜日

Page 107: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

一億11年11月30日水曜日

Page 108: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

総11年11月30日水曜日

Page 109: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

プログラマー

11年11月30日水曜日

Page 110: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

国家11年11月30日水曜日

Page 111: enchant.js を使ったハックの紹介「enchant.js meetup! OSAKA」

Ubiquitous Entertainment Inc.

11年11月30日水曜日