日曜ゲームクリエータの日記
2018-12-31T14:30:14+09:00
kazenetu
IT業界の末端で仕事しています。記事のソースコードは商用利用可能、改変可能、クレジット表記不要です。(関係のないコメントやトラックバックは削除しています)
Excite Blog
2018年を振り返る
http://kazenetu.exblog.jp/238949813/
2018-12-31T14:30:00+09:00
2018-12-31T14:30:14+09:00
2018-12-31T14:30:14+09:00
kazenetu
その他
2018年を振り返ってみようと思います。
【2017年の抱負の結果】
2017年を振り返るの抱負を振り返ります。
「管理もできるエンジニア」を目指しつつ、技術スキルの向上を図ろうと思います。
また、社員全体の技術スキルの底上げにも関われるポジションにつけるように
交渉をしていきたいと思います。
技術スキルの向上は出来ました。
社員全体の技術スキルの底上げに関われるポジションもつけるチャンスも出てきました。
ただ、参加プロジェクトが忙しいために話が進められない状態でした。
【お仕事】
客先常駐と社内業務は 1:4 でした。
主なプロジェクトは以下の通りです。
〇社内業務(要件定義フェーズ)
とある顧客の要件定義に途中から参加 主に画面設計書を担当 【所感】
積極的に顧客の要望や現状の確認を実施できた。今まで経験した業務の知識を活かした。
〇社内業務(.NET Core+WindowsForms 開発フェーズ)
社内でシステム構成の提案と決定したシステム構成をゼロから作成した。 不慣れなチームメンバーを補助するために自動生成ツールとドキュメントを作成した。 プライベートで技術検証を行い、開発を円滑に進められるようにした。 技術検証 TinyServerClientFramework 【所感】
複数のプロジェクトで採用された。システム構成に.NET Coreを採用できることができた。ユニットテストを採用したが活用されなかった。Jenkinsでの自動テスト環境を作成したが、やはり活用されなかった。DockerでプロジェクトごとにJenkinsを立てるなど活用できた。高い評価をいただいた。
〇客先常駐(Windowsアプリ)
開発しながら弊社チームのチームリーダー補助からチームリーダーを兼任した。 実装が難しい機能を担当した。 【所感】
昨年から参加しているプロジェクトを引き上げた。引き上げる前の引き継ぎを完了させた。
【ブログ】
GitHubでの記事管理に記事を書き上げるもブログに投稿しなかった。ブログの在り方も今後考えたい。
【その他】
GitHubの更新を毎日続けられた。 .NET Coreをプロジェクト用フレームワークに利用できた 。
開発環境も支障がないため、デプロイ環境などを検証したら次回以降のプロジェクトで提案できそう。
TinyServerClientFramework C#からTypeScriptに変換するツールを作成した。
ConvertCStoTS ConvertCStoTSの反省点から「C#解析処理をDDDっぽい設計」で実装を開始した。
CSharpAnalyze
【来年の抱負】
複数プロジェクトを兼任するなど忙しい一年でした。
来年もボーっと過ごしていたら多分、今年と同じ一年を過ごすことになりそうです。
来年は意識的に選択する一年にしようと思います。
]]>
JasperReportsでPDFを出力する
http://kazenetu.exblog.jp/238315910/
2018-02-11T09:07:00+09:00
2018-02-11T09:07:45+09:00
2018-02-11T09:07:45+09:00
kazenetu
プログラム(Java)
詳細な記事をGitHubにまとめました。
【JasperReportsでPDFを出力する その1】
https://github.com/kazenetu/blog-reports/blob/master/reports/11-jasperreports-01/index.md
Eclipseプラグインをインストールする際の注意点をまとめました。
【JasperReportsでPDFを出力する その2】
https://github.com/kazenetu/blog-reports/blob/master/reports/12-jasperreports-02/index.md
Mavenでのライブラリ取得で嵌ったポイントと対応をまとめました。
よかったらクリックしてください。
にほんブログ村]]>
2017年を振り返る
http://kazenetu.exblog.jp/238132433/
2017-12-31T00:33:00+09:00
2017-12-31T00:33:25+09:00
2017-12-31T00:33:25+09:00
kazenetu
その他
2017年を振り返ってみようと思います。
【2017年の抱負の結果】
2016年を振り返るの抱負を振り返ります。
来年から新しい会社で仕事になります。
求められるスキルが高いため、常に挑戦していく姿勢が必要になります。
成果を出せるように頑張ろうと思います。
転職先では「JavaEE(JAX-RS)+AngularJS」のシステム構成をゼロから作成し、
開発体制を整えるなどスキルをいかんなく発揮できました。
成果を上げ、よい評価をいただきました。
また、自分にとって久々のJavaと初めてのAngularJSというチャレンジにも
上々の成果を上げられたと思います。
【お仕事】
客先常駐と社内業務は半々でした。
〇社内業務(JavaEE(JAX-RS)+AngularJS 開発フェーズ) 社内でシステム構成の提案と決定したシステム構成をゼロから作成した。 JavaやAngularJSに不慣れなチームメンバーを補助するためにテンプレートを作成した。 プライベートで技術検証やツール類の作成を行い、開発を円滑に進められるようにした。 技術検証 フル版-jaxrs-angular 簡易版tiny-jaxrs ツール PostgreSQLからPOJOを作成するツール PostgreSQL2POJO Excelのコピペからソースなどを作成するツール SourceGenerator
【所感】社内向けにシステム構成の提案ができた。 開発フェーズのリードエンジニアとしてチームメンバーのサポートができた。 個人的に久々のJava開発と初めてのAngularJSとエキサイティングな環境だった。 WEB+DB Vol.94の「Javaの新定石 最新JavaEEでかんたんWeb開発」が非常になった。 高い評価をいただいた。 作成するファイル数が少ない簡易版tiny-jaxrsを採用したが、Serviceレイヤーを端折ったなど反省点もあった。
(結局、Modelインスタンスからトランザクションインスタンスを渡して、別のModelインタスタンスを生成する方法にした)
〇客先常駐(Windowsアプリ) 開発しながら弊社チームのチームリーダー補助からチームリーダーを兼任した。 実装が難しい機能を担当した。
【所感】担当した機能はパズルのようで楽しく実装できた。 未経験の業界で用語や仕様の意味を理解するのに苦労した。
(まだわからないことが多い……) VB6以前のような密結合な作りで実装の理解に苦労した。 弊社チームメンバーの進捗管理とフォーローなど管理面で苦労した。 弊社チームのリーダーとして管理とフォローを行うも、内外のゴタゴタに振り回されて心身ともに疲れることが多かった。 様々な要因から常駐先の評価もイマイチだった。 メンバによって技術スキルやコミュニケーションスキルのばらつきが大きいことがわかった。
【ブログ】GitHubでの記事管理に記事を書き上げるもブログに投稿することを忘れていた。
結果、2017年の記事数はゼロだった。
【その他】GitHubの更新を毎日続けられた。 .NetCoreの勉強を始めた。
開発環境も支障がないため、デプロイ環境などを検証したら次回以降のプロジェクトで提案できそう。
dotNETCoreTest お給料は前職と比べて少し高くなった。
納得のいく評価もされ、転職はとりあえず成功だと思う。
【来年の抱負】
「管理もできるエンジニア」を目指しつつ、技術スキルの向上を図ろうと思います。
また、社員全体の技術スキルの底上げにも関われるポジションにつけるように交渉をしていきたいと思います。
]]>
2016年を振り返る
http://kazenetu.exblog.jp/23513100/
2016-12-31T11:40:00+09:00
2016-12-31T11:40:34+09:00
2016-12-31T11:40:34+09:00
kazenetu
その他
2016年を振り返ってみようと思います。
【2016年の抱負の結果】
2015年を振り返るの抱負を振り返ります。
プライベートでは「お仕事でキャッチアップできない情報」をキャッチアップ・実践することは今までどおり行います。
ブログはもう少し多めにしたいです。
お仕事については現状に満足や思考停止しないようにしたいと改めて思いました。
また、「今までと同じことを繰り返さないようにしたい」と思います。
情報のキャッチアップはできましたが実践が伴いませんでした。
仕事面では炎上案件にアサインされることが多く相変わらず振り回された一年でした。
また環境面でも少なからず変化があり、「自分が目指す方向」と「組織が目指す方向」のギャップが大きく感じました。
【お仕事】
客先常駐と社内業務は1:2程度でした。
◯社内業務
・A案件
・ほぼ炎上していた。
・社内開発環境やインフラの構築と保守を担当。
・協力会社のPC手配や教育を担当。
・必須スキルを持ち合わせていない人がアサインされると悲惨ね。
・B案件
・矛盾のない設計と実装で機能を追加。
・PaaSへのデプロイを実施。
・とはいえ、もう少しプラグイン的な要素を追加したかったかも。
・総合
・社内の評価は相変わらず低めだった。
◯客先常駐
・C案件
・難しい実装を進んで担当になり実績も上げた。
・プロジェクト参加後に素早くトップスピードを出すことが出来た。
・提案を行い採用していただいた。
・D案件
・難しい実装を進んで担当になり実績も上げた。
・厳しい勤務環境だったが乗り越えることができた。
・総合
・どちらも高評価を得た。
【ブログ】
・GitHubでの管理に切り替えた。
・「TypeScriptでenchant.jsを使ってサンプルを作ってみる」シリーズを中心に記事を作成することができた。
・今年もやはり記事数が少なかった。
【その他】
・1年のうち半分は炎上案件だった。
・現職を年末に退職し転職した。
【来年の抱負】
来年から新しい会社で仕事になります。
求められるスキルが高いため、常に挑戦していく姿勢が必要になります。
成果を出せるように頑張ろうと思います。
]]>
ソースジェネレーターを作ってみました
http://kazenetu.exblog.jp/23346263/
2016-11-07T07:42:00+09:00
2016-11-07T07:42:35+09:00
2016-11-07T07:42:35+09:00
kazenetu
プログラム(その他)
はじめに
「オフィスツールで作成された設計書や仕様書を元にソースコードを自動生成したい」
「ランタイムが必要だったりビルド環境が必要なのは使いづらい」
「Webサービスを使うと情報を入れるので使えない環境もある」
という観点でHTMLとJavaScriptでソースジェネレーターを作ってみました。
利用方法
ソースコードをhttps://github.com/kazenetu/blog-reports/blob/master/reports/09-JS-SourceGenerator/source/index.htmlをダウンロードしてください。
ダウンロードしたファイルをブラウザで開いてください。
画面上部のテキストエリアにタブで区切った文字列をペーストしてください。
※ヒントは上の「設定値:」以下を参考にして下ください。
画面中央のドロップダウンを選択し、「変換」ボタンをクリックしてください。
画面下部のテキストエリアに変換結果が出力されます。
コピーしてご利用ください。
拡張方法
source/index.htmlの49行以降のformatsオブジェクトを下記のように拡張します。
formats.ドロップダウン名 = new Object();
// 設定値の説明
formats.ドロップダウン名.text = "論理プロパティ名 データ型 物理プロパティ名";
// 設定値の数
formats.ドロップダウン名.count = 3;
// フォーマット {数字} にタブ区入りされた値が設定されます
formats.ドロップダウン名.format = '/// <summary>'+'\n'+
'/// {0}'+'\n'+
'/// </summary>'+'\n'+
'public {1} {2} {set; get; }'+'\n';
おわりに
ちょっとしたツールを作ってみました。
お仕事のお役に立てれば幸いです。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その8
http://kazenetu.exblog.jp/23199905/
2016-09-08T15:36:00+09:00
2016-09-08T15:35:57+09:00
2016-09-08T15:35:57+09:00
kazenetu
Node.js
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
前回作成したマップ表示にキャラクタを表示します。
※MapデータはenchantMapEditorで作成したデータを利用します。
※利用可能なGitHubPagesを用意しました。ご利用ください。
http://kazenetu.github.io/enchantMapEditor/mapeditor.html
完成画面
前提
ビルド環境の構築を参照して、下記を実行してください。
※バージョンが1.1.2 に更新されています。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/08-ETS-HowTo-08/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0)
・npm(3.8.3)
実装手順
1.template/assets/resources/ にマップグラフィック(map0.gif)を追加してください。
※enchant.js Image Materialsの素材を使用しています。
2.template/assets/resources/ に 表示させるグラフィック(3x4_chara.png)を追加してください。
3.template/assets/data/ にenchantMapEditorで作成し、「コード生成」ボタンでマップ作成コードをテキストに保存しておいてください。
※利用可能なGitHubPagesを用意しました。ご利用ください。
http://kazenetu.github.io/enchantMapEditor/mapeditor.html
4.template/main.tsを開き、下記の実装をしてください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
private group: Rf.ETS.FrameWork.Group = null;
private mapHeight: number = 0; //※1
private mapWidth: number = 0; //※1
private backgroundMap:Rf.ETS.FrameWork.ExMap = null; //※1
private player: Rf.ETS.FrameWork.Character = null; //※1
private touchPanel: Rf.ETS.FrameWork.Sprite = null; //※1
private touchX: number = -1; //※1
private touchY: number = -1; //※1
private isTouch: boolean = false; //※1
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void { //※2
//サイズを320x480に変更
this.screenWidth = 480;
this.screenHeight = 480;
}
/**
* リソース設定イベント
* @method
* @name FrameWork.GameMain#resourceLoad
*/
protected onResourceSetting(): void {
this.resourceManager.SetResourcePath("./assets/");
this.resourceManager.AddResourceName("mapImage", "resources/map0.gif");
this.resourceManager.AddResourceName("charaImage", "resources/3x4_chara.png");
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void { //※3
//グループインスタンス作成
this.group = new Rf.ETS.FrameWork.Group(parent); //※3.1
this.group.y = 50;
//背景用マップの読み込み
this.backgroundMap = new Rf.ETS.FrameWork.ExMap(16, 16, this.group); //※3.2
this.backgroundMap.FileName = this.resourceManager.GetResourceName("mapImage");
//マップエディタから出力したloadDataメソッドを張り付ける//※3.3
this.backgroundMap.LoadDatas([
//enchant MapEditorのコード出力で表示したbackgroundMap.loadDataの第一パラメータ(二次元配列)
], [
//enchant MapEditorのコード出力で表示したbackgroundMap.loadDataの第二パラメータ(二次元配列)
]);
//マップ情報の設定 //※3.4
this.mapHeight = this.backgroundMap.height / 16;
this.mapWidth = this.backgroundMap.width / 16;
this.backgroundMap.collisionData = [
//enchant MapEditorのコード出力で表示したbackgroundMap.collisionData(二次元配列)
];
//キャラクタの設定 //※3.5
this.player = new Rf.ETS.FrameWork.Character(32, 32, this.group);
//イメージの設定(Rf.ETS.FrameWork.Sprite独自の機能)
this.player.FileName = this.resourceManager.GetResourceName("charaImage");
//その他の設定(Rf.ETS.FrameWork.Character独自の機能)
this.player.charaIndex = 1;
this.player.Dir = Rf.ETS.FrameWork.Direction.Down;
this.player.AnimePattern = [0,1,0,2];
this.player.AnimeWidth = 3;
this.player.maxWaitCount =1;
this.player.Init();
this.player.x = 20 * 16;
this.player.y = 24 * 16;
//前景用マップの読み込み //※3.6
let frontMap = new Rf.ETS.FrameWork.ExMap(16, 16, this.group);
frontMap.FileName = this.resourceManager.GetResourceName("mapImage");
//マップエディタから出力したloadDataメソッドを張り付ける
frontMap.LoadData([
//enchant MapEditorのコード出力で表示したbackgroundMap.loadDataの追加した第三パラメータ(二次元配列)
]);
//タッチ用スプライトの追加 //※3.7
this.touchPanel = new Rf.ETS.FrameWork.Sprite(this.mapWidth * 16, this.mapHeight * 16, this.group);
this.touchPanel.touchEnabled = true;
this.touchPanel.addEventListener(enchant.Event.TOUCH_START, (e: any) => {
this.touchX = e.x;
this.touchY = e.y;
this.isTouch = true;
});
this.touchPanel.addEventListener(enchant.Event.TOUCH_MOVE, (e: any) => {
this.touchX = e.x;
this.touchY = e.y;
this.isTouch = true;
});
this.touchPanel.addEventListener(enchant.Event.TOUCH_END, (e: any) => {
this.isTouch = false;
});
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void { //※4
//表示位置の設定:マップの移動
let centerX = this.screenWidth * 0.5;
let centerY = this.screenHeight * 0.5;
if (this.isTouch === true) {
//表示位置の設定:マップの移動
let addX = 0;
let addY = 0;
//中心位置との距離を求める
let tempX = this.touchX - centerX;
let tempY = this.touchY - centerY;
let dir:Rf.ETS.FrameWork.Direction = this.player.Dir;
if (Math.abs(tempX) < Math.abs(tempY)) { //※4.1
//Yの距離のほうが値が大きい
if (tempY < 0) {
addY = -1;
dir = Rf.ETS.FrameWork.Direction.Up;
} else {
addY = 1;
dir = Rf.ETS.FrameWork.Direction.Down;
}
} else {
//Xの距離のほうが値が大きい
if (tempX < 0) {
addX = -1;
dir = Rf.ETS.FrameWork.Direction.Left;
} else {
addX = 1;
dir = Rf.ETS.FrameWork.Direction.Right;
}
}
if(this.player.Dir != dir){
this.player.Dir = dir;
}
let hitTestX = this.player.x + addX * 16;
let hitTestY = this.player.y + addY * 16 + 16;
if(this.backgroundMap.hitTest(hitTestX,hitTestY) === false
&& this.backgroundMap.hitTest(hitTestX+16,hitTestY) === false){ //※4.2
this.player.x += addX*16;
this.player.y += addY*16;
this.player.Run();
}
}
this.group.x = -this.player.x + centerX; //※4.3
if (this.group.x > 0) {
this.group.x = 0;
}
if (this.group.x < -16 * this.mapWidth + this.screenWidth) {
this.group.x = -16 * this.mapWidth + this.screenWidth;
}
this.group.y = -this.player.y + centerY; //※4.3
if (this.group.y > 0) {
this.group.y = 0;
}
if (this.group.y <= -16 * this.mapHeight + this.screenHeight) {
this.group.y = -16 * this.mapHeight + this.screenHeight;
}
}
}
実装内容は以下のとおりです。 (太字 は前回からの修正・追記)
フィールドの定義mapHeight
マップの高さ(横スクロールの限界値)mapWidth
マップの幅(縦スクロールの限界値)backgroundMap
背景マップ(前回はローカル変数)player
キャラクタオブジェクトtouchPanel
マップ移動用のSprite(透明レイヤー)touchX
タッチX位置touchY
タッチY位置isTouch
タッチ状態(タッチ時にtrue、タッチ終了時にfalse) onInitializeメソッド(一回だけ呼ばれる) 画面サイズを設定 onLoadメソッド(一回だけ呼ばれる)「group」フィールドの生成 背景用マップとしてExMapの生成
※enchant MapEditorで作成したデータを扱うクラスマップエディタから出力した「loadDataメソッド」の引数を設定するマップの幅と高さ(スクロールの限界値)、背景用マップの障害物情報(collisionData)を設定するキャラクタの生成
※背景マップと前景マップの間にキャラクタを表示する前景用マップとしてExMapの生成
※追加したレイヤー(例えば大きな木の上部)を設定するマップ移動用のSpriteの生成とイベントの設定
※タッチ時にタッチ位置とタッチ状態をタッチ中(true) に設定
※タッチ終了時にタッチ状態を未タッチ(false) に設定 onRunメソッド(描画ごとに呼ばれる)
※全面的に変更されていますタッチ位置によってキャラクタ移動方向と向きを決める背景用マップの障害物情報を元に通行可能か確認し、通行可能であれば移動とアニメーションを行う
※マップは16ピクセルx16ピクセル単位、キャラクタは32ピクセルx32ピクセルのため、足元の2マス分のチェックを行うキャラクタが中心になるように「group」フィールドの位置情報を設定する
※マップ端までスクロールした場合はスクロールをストップする
5.npm run build または gulp defaultでビルドを行います。
おわりに
8回にわたってTypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」の利用例を紹介しました。
ブラウザゲームをTypeScriptで作成する場合の選択肢のひとつとなれば幸いです。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その7
http://kazenetu.exblog.jp/23110348/
2016-08-15T18:41:00+09:00
2016-08-15T18:41:52+09:00
2016-08-15T18:41:52+09:00
kazenetu
Node.js
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
マップを表示します。
※MapデータはenchantMapEditorで作成したデータを利用します。
※利用可能なGitHubPagesを用意しました。ご利用ください。
http://kazenetu.github.io/enchantMapEditor/mapeditor.html
前提
ビルド環境の構築を参照して、下記を実行してください。
※バージョンが1.1.0 に更新されています。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/07-ETS-HowTo-07/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0)
・npm(3.8.3)
実装手順
1.template/assets/resources/ にマップグラフィック(map0.gif)を追加してください。
※enchant.js Image Materialsの素材を使用しています。
2.template/assets/data/ にenchantMapEditorで作成し、「コード生成」ボタンでマップ作成コードをテキストに保存しておいてください。
※利用可能なGitHubPagesを用意しました。ご利用ください。
http://kazenetu.github.io/enchantMapEditor/mapeditor.html
3.template/main.tsを開き、下記の実装をしてください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
private group: Rf.ETS.FrameWork.Group = null;
private mapHeight: number = 0; //※1
private mapWidth: number = 0; //※1
private touchPanel: Rf.ETS.FrameWork.Sprite = null; //※1
private touchX: number = -1; //※1
private touchY: number = -1; //※1
private isTouch: boolean = false; //※1
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void { //※2
//サイズを320x480に変更
this.screenWidth = 480;
this.screenHeight = 480;
}
/**
* リソース設定イベント
* @method
* @name FrameWork.GameMain#resourceLoad
*/
protected onResourceSetting(): void {
this.resourceManager.SetResourcePath("./assets/");
this.resourceManager.AddResourceName("mapImage", "resources/map0.gif");
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void { //※3
//グループインスタンス作成
this.group = new Rf.ETS.FrameWork.Group(parent); //※3.1
this.group.y = 50;
//背景用マップの読み込み
let backgroundMap = new Rf.ETS.FrameWork.ExMap(16, 16, this.group); //※3.2
backgroundMap.FileName = this.resourceManager.GetResourceName("mapImage");
//マップエディタから出力したloadDataメソッドを張り付ける//※3.3
backgroundMap.LoadDatas([
//enchant MapEditorのコード出力で表示したbackgroundMap.loadDataの第一パラメータ(二次元配列)
], [
//enchant MapEditorのコード出力で表示したbackgroundMap.loadDataの第二パラメータ(二次元配列)
]);
//マップ情報の設定 //※3.4
this.mapHeight = backgroundMap.height / 16;
this.mapWidth = backgroundMap.width / 16;
//前景用マップの読み込み //※3.5
let frontMap = new Rf.ETS.FrameWork.ExMap(16, 16, this.group);
frontMap.FileName = this.resourceManager.GetResourceName("mapImage");
//マップエディタから出力したloadDataメソッドを張り付ける
frontMap.LoadData([
//enchant MapEditorのコード出力で表示したbackgroundMap.loadDataの追加した第三パラメータ(二次元配列)
]);
//タッチ用スプライトの追加 //※3.6
this.touchPanel = new Rf.ETS.FrameWork.Sprite(this.mapWidth * 16, this.mapHeight * 16, this.group);
this.touchPanel.touchEnabled = true;
this.touchPanel.addEventListener(enchant.Event.TOUCH_START, (e: any) => {
this.touchX = e.x;
this.touchY = e.y;
this.isTouch = true;
});
this.touchPanel.addEventListener(enchant.Event.TOUCH_MOVE, (e: any) => {
this.touchX = e.x;
this.touchY = e.y;
this.isTouch = true;
});
this.touchPanel.addEventListener(enchant.Event.TOUCH_END, (e: any) => {
this.isTouch = false;
});
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void { //※4
let addX = 0;
let addY = 0;
if (this.isTouch === true) {
//表示位置の設定:マップの移動 //※4.1
let centerX = this.screenWidth * 0.5;
let centerY = this.screenHeight * 0.5;
//中心位置との距離を求める
let tempX = this.touchX - centerX;
let tempY = this.touchY - centerY;
if (Math.abs(tempX) < Math.abs(tempY)) {
//Yの距離のほうが値が大きい
if (tempY < 0) {
addY = -1;
} else {
addY = 1;
}
} else {
//Xの距離のほうが値が大きい
if (tempX < 0) {
addX = -1;
} else {
addX = 1;
}
}
}
//値を加算する //※4.2
this.group.x += -16 * addX;
if (this.group.x > 0) {
this.group.x = 0;
}
if (this.group.x < -16 * this.mapWidth + this.screenWidth) {
this.group.x = -16 * this.mapWidth + this.screenWidth;
}
this.group.y += -16 * addY;
if (this.group.y > 0) {
this.group.y = 0;
}
if (this.group.y <= -16 * this.mapHeight + this.screenHeight) {
this.group.y = -16 * this.mapHeight + this.screenHeight;
}
}
}
実装内容は以下のとおりです。
フィールドの定義 mapHeight
マップの高さ(横スクロールの限界値)mapWidth
マップの幅(縦スクロールの限界値)touchPanel
マップ移動用のSprite(透明レイヤー)touchX
タッチX位置touchY
タッチY位置isTouch
タッチ状態(タッチ時にtrue、タッチ終了時にfalse)onInitializeメソッド(一回だけ呼ばれる) 画面サイズを設定onLoadメソッド(一回だけ呼ばれる)「group」フィールドの生成 背景用マップとしてExMapの生成
※enchant MapEditorで作成したデータを扱うクラスマップエディタから出力した「loadDataメソッド」の引数を設定するマップの幅と高さ(スクロールの限界値)の設定前景用マップとしてExMapの生成
※追加したレイヤー(例えば大きな木の上部)を設定するマップ移動用のSpriteの生成とイベントの設定
※タッチ時にタッチ位置とタッチ状態をタッチ中(true) に設定
※タッチ終了時にタッチ状態を未タッチ(false) に設定 onRunメソッド(描画ごとに呼ばれる) タッチ位置によってマップ移動の方向を決めるマップ移動の方向を「group」フィールドに反映させる
※マップ端までスクロールした場合はスクロールをストップする
4.npm run build または gulp defaultでビルドを行います。
おわりに
今回はマップを表示しました。
最後にマップにキャラクタを表示してみます。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その6
http://kazenetu.exblog.jp/23033019/
2016-07-24T20:22:40+09:00
2016-07-24T20:22:35+09:00
2016-07-24T20:22:35+09:00
kazenetu
Node.js
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
前回ではタップ(またはクリック)すると落下するグラフィックをRf.ETS.FrameWork.Characterを使って表示しました。
Rf.ETS.FrameWork.Characterでは歩行アニメーションが2パターンのものがデフォルト設定になっています。
今回はアニメーションパターンが3パターンのものを利用してみます。
前提
ビルド環境の構築を参照して、下記を実行してください。
※バージョンが1.0.8 に更新されています。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/06-ETS-HowTo-06/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0)
・npm(3.8.3)
実装手順
1.template/assets/resources/ に 表示させるグラフィック(3x4_chara.png)を追加してください。
2.template/main.tsを開き、下記の実装をしてください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
//フィールド
private sprite: Rf.ETS.FrameWork.Character = null; //※1
private isFall:boolean = false;
private fallSpeed:number = 0;
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void { //※2
//サイズを320x480に変更
this.screenWidth = 320;
this.screenHeight = 480;
//fpsを設定
this.fps = 20;
}
/**
* リソース設定イベント
* @method
* @name FrameWork.GameMain#resourceLoad
*/
protected onResourceSetting(): void { //※3
//this.resourceManager.SetResourcePathメソッドでリソースのルートパスを設定
this.resourceManager.SetResourcePath("./assets/resources/");
//リソースのキーとファイルパスを記述
this.resourceManager.AddResourceName("charaImage", "3x4_chara.png");
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void { //※4
//グラフィックを生成
this.sprite = new Rf.ETS.FrameWork.Character(32, 32, parent); //※4.1
//イメージの設定(Rf.ETS.FrameWork.Sprite独自の機能)
this.sprite.FileName = this.resourceManager.GetResourceName("charaImage"); //※4.2
//その他の設定(Rf.ETS.FrameWork.Character独自の機能) //※4.3
this.sprite.charaIndex = 1;
this.sprite.Dir = Rf.ETS.FrameWork.Direction.Down;
this.sprite.AnimePattern = [0,1,0,2];
this.sprite.AnimeWidth = 3;
this.sprite.Init();
this.sprite.touchEnabled = true;
this.sprite.x = 100;
this.sprite.y = 100;
//グラフィックのタップで落下するイベント //※4.4
this.sprite.on(enchant.Event.TOUCH_END,(e:enchant.Event)=>{
if(this.isFall === false){
this.isFall = true;
this.fallSpeed = 2;
//アニメを停止させる(Rf.ETS.FrameWork.Character独自の機能) //※4.5
this.sprite.SuspendAnime();
}
});
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void { //※5
//歩行アニメする(Rf.ETS.FrameWork.Character独自の機能)
this.sprite.Run();
//タップされた場合はグラフィックを落下させる
if(this.isFall){
this.sprite.y += this.fallSpeed;
if(this.fallSpeed < 10){
this.fallSpeed += 1;
}
if(this.sprite.y > 480){
this.sprite.y = 100;
this.isFall = false;
//アニメを再開させる(Rf.ETS.FrameWork.Character独自の機能)
this.sprite.ResumeAnime();
}
}
}
}
実装内容は以下のとおりです。
※太字は前回からの修正点です。
フィールドの定義 sprite
キャラクタクラスisFall
落下フラグ(trueで落下状態)fallSpeed
落下スピード(2->10)onInitializeメソッド(一回だけ呼ばれる) 画面サイズとfps(1秒間の描画回数)を設定onResourceSettingメソッド(一回だけ呼ばれる)
実装を追加したメソッドです。 リソースのルートパスを設定するリソースのキーとファイルパスの組み合わせを設定するonLoadメソッド(一回だけ呼ばれる)「sprite」フィールドの生成
※Rf.ETS.FrameWork.Sprite独自の書き方リソースの設定
※Rf.ETS.FrameWork.Sprite独自の書き方その他の設定
※Rf.ETS.FrameWork.Character独自の機能
・キャラクタの種類(charaIndex)
・キャラクタの向き(Dir)
・アニメパターン(AnimePattern)
設定例)AnimePattern = [0,1,0,2]
→ 左から0番目、1番目、0番目、2番目の順番でアニメーションする
・1キャラクタの画像のキャラ数(AnimeWidth)
設定例)AnimeWidth = 3
→ 今回は3種類のアニメーションのため、3を設定
・初期化メソッド(Init())
※Rf.ETS.FrameWork.Character独自の機能
・タップ(クリック)可能
・位置を設定 イベント定義(タップ・クリックでspriteを落下させる)アニメを停止させる(Rf.ETS.FrameWork.Character独自の機能)
※イベント定義(タップ・クリックでspriteを落下させる)内の処理 onRunメソッド(描画ごとに呼ばれる)
* 歩行アニメする(Rf.ETS.FrameWork.Character独自の機能) 「落下フラグ」フィールドがtrueの場合、「sprite」フィールドを落下させる。 画面下まで落下したらもとの場所に戻し、「落下フラグ」フィールドをfalseに設定する。 アニメを再開させる(Rf.ETS.FrameWork.Character独自の機能)
3.npm run build または gulp defaultでビルドを行います。
おわりに
今回はより簡単にキャラクターのグラフィックを利用できるように修正しました。
次回はマップを表示します。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その5
http://kazenetu.exblog.jp/22961874/
2016-07-03T18:33:36+09:00
2016-07-03T18:33:37+09:00
2016-07-03T18:33:37+09:00
kazenetu
Node.js
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
前回ではタップ(またはクリック)すると落下するグラフィックを表示しました。
今回はグラフィックの表示にRf.ETS.FrameWork.Spriteではなく、Rf.ETS.FrameWork.Characterを使って実装します。
また、Rf.ETS.FrameWork.Spriteとの違いを分かりやすくするため、アニメーションも実装します。
落下前はアニメーションを行い、落下時はアニメーションを停止します。
前提
ビルド環境の構築を参照して、下記を実行してください。
※バージョンが1.0.7に更新されています。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/05-ETS-HowTo-05/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0)
・npm(3.8.3)
Rf.ETS.FrameWork.Characterとは
Rf.ETS.FrameWork.Spriteクラスのサブクラスです。
下記の機能が追加されています。
・アニメーション設定(パターンなど)
・アニメーション制御
実装手順
1.template/assets/resources/ に 表示させるグラフィック(chara.png)を追加してください。
2.template/main.tsを開き、下記の実装をしてください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
//フィールド
private sprite: Rf.ETS.FrameWork.Character = null; //※1
private isFall:boolean = false;
private fallSpeed:number = 0;
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void { //※2
//サイズを320x480に変更
this.screenWidth = 320;
this.screenHeight = 480;
//fpsを設定
this.fps = 20;
}
/**
* リソース設定イベント
* @method
* @name FrameWork.GameMain#resourceLoad
*/
protected onResourceSetting(): void { //※3
//this.resourceManager.SetResourcePathメソッドでリソースのルートパスを設定
this.resourceManager.SetResourcePath("./assets/resources/");
//リソースのキーとファイルパスを記述
this.resourceManager.AddResourceName("charaImage", "chara.png");
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void { //※4
//グラフィックを生成
this.sprite = new Rf.ETS.FrameWork.Character(32, 32, parent); //※4.1
//イメージの設定(Rf.ETS.FrameWork.Sprite独自の機能)
this.sprite.FileName = this.resourceManager.GetResourceName("charaImage"); //※4.2
//その他の設定(Rf.ETS.FrameWork.Character独自の機能) //※4.3
this.sprite.charaIndex = 0;
this.sprite.Dir = Rf.ETS.FrameWork.Direction.Down;
this.sprite.touchEnabled = true;
this.sprite.x = 100;
this.sprite.y = 100;
//グラフィックのタップで落下するイベント //※4.4
this.sprite.on(enchant.Event.TOUCH_END,(e:enchant.Event)=>{
if(this.isFall === false){
this.isFall = true;
this.fallSpeed = 2;
//アニメを停止させる(Rf.ETS.FrameWork.Character独自の機能) //※4.5
this.sprite.SuspendAnime();
}
});
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void { //※5
//歩行アニメする(Rf.ETS.FrameWork.Character独自の機能)
this.sprite.Run();
//タップされた場合はグラフィックを落下させる
if(this.isFall){
this.sprite.y += this.fallSpeed;
if(this.fallSpeed < 10){
this.fallSpeed += 1;
}
if(this.sprite.y > 480){
this.sprite.y = 100;
this.isFall = false;
//アニメを再開させる(Rf.ETS.FrameWork.Character独自の機能)
this.sprite.ResumeAnime();
}
}
}
}
実装内容は以下のとおりです。
※太字は前回からの修正点です。
フィールドの定義 sprite
キャラクタクラスisFall
落下フラグ(trueで落下状態)fallSpeed
落下スピード(2->10)onInitializeメソッド(一回だけ呼ばれる) 画面サイズとfps(1秒間の描画回数)を設定onResourceSettingメソッド(一回だけ呼ばれる)
実装を追加したメソッドです。 リソースのルートパスを設定するリソースのキーとファイルパスの組み合わせを設定するonLoadメソッド(一回だけ呼ばれる)「sprite」フィールドの生成
※Rf.ETS.FrameWork.Sprite独自の書き方リソースの設定
※Rf.ETS.FrameWork.Sprite独自の書き方 その他の設定
※Rf.ETS.FrameWork.Character独自の機能
・キャラクタの種類(charaIndex)
・キャラクタの向き(Dir)
※Rf.ETS.FrameWork.Character独自の機能
・タップ(クリック)可能
・位置を設定 イベント定義(タップ・クリックでspriteを落下させる) アニメを停止させる(Rf.ETS.FrameWork.Character独自の機能)
※イベント定義(タップ・クリックでspriteを落下させる)内の処理 onRunメソッド(描画ごとに呼ばれる)
* 歩行アニメする(Rf.ETS.FrameWork.Character独自の機能) 「落下フラグ」フィールドがtrueの場合、「sprite」フィールドを落下させる。 画面下まで落下したら もとの場所に戻し、「落下フラグ」フィールドをfalseに設定する。 アニメを再開させる(Rf.ETS.FrameWork.Character独自の機能)
3.npm run build または gulp defaultでビルドを行います。
おわりに
今回はより簡単にキャラクターのグラフィックを利用できるように修正しました。
次回はキャラクタグラフィックを変更した上でその対応をしてみます。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その4
http://kazenetu.exblog.jp/22908182/
2016-06-15T17:23:50+09:00
2016-06-15T17:23:51+09:00
2016-06-15T17:23:51+09:00
kazenetu
Node.js
はじめに
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
前回のソースを修正して、タップ(またはクリック)すると落下するグラフィックを表示します。
前提
ビルド環境の構築を参照して、下記を実行してください。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/04-ETS-HowTo-04/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0)
・npm(3.8.3)
実装手順
1.template/assets/resources/ に 表示させるグラフィック(chara.png)を追加してください。
2.template/main.tsを開き、下記の実装をしてください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
//フィールド
private sprite: Rf.ETS.FrameWork.Sprite = null; //※1
private isFall:boolean = false;
private fallSpeed:number = 0;
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void { //※2
//サイズを320x480に変更
this.screenWidth = 320;
this.screenHeight = 480;
//fpsを設定
this.fps = 20;
}
/**
* リソース設定イベント
* @method
* @name FrameWork.GameMain#resourceLoad
*/
protected onResourceSetting(): void { //※3
//this.resourceManager.SetResourcePathメソッドでリソースのルートパスを設定
this.resourceManager.SetResourcePath("./assets/resources/");
//リソースのキーとファイルパスを記述
this.resourceManager.AddResourceName("charaImage", "chara.png");
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void { //※4
//グラフィックを生成
this.sprite = new Rf.ETS.FrameWork.Sprite(32, 32, parent); //※4.1
//イメージの設定(Rf.ETS.FrameWork.Sprite独自の機能)
this.sprite.FileName = this.resourceManager.GetResourceName("charaImage"); //※4.2
//その他の情報の設定(enchant.js共通) //※4.3
this.sprite.originX = 16; //中心で回転するように設定
this.sprite.originY = 16; //中心で回転するように設定
this.sprite.frame = 26 * 2; //サンプル画像で正面画像を表示する
this.sprite.touchEnabled = true;
this.sprite.x = 100;
this.sprite.y = 100;
//グラフィックのタップで落下するイベント //※4.4
this.sprite.on(enchant.Event.TOUCH_END,(e:enchant.Event)=>{
if(this.isFall === false){
this.isFall = true;
this.fallSpeed = 2;
}
});
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void { //※5
//タップされた場合はグラフィックを落下させる
if(this.isFall){
this.sprite.y += this.fallSpeed;
if(this.fallSpeed < 10){
this.fallSpeed += 1;
}
if(this.sprite.y > 480){
this.sprite.y = 100;
this.isFall = false;
}
}
}
}
実装内容は以下のとおりです。
※太字は前回からの修正点です。
フィールドの定義
sprite
グラフィック(スプライト)クラス
isFall
落下フラグ(trueで落下状態)
fallSpeed
落下スピード(2->10)
onInitializeメソッド(一回だけ呼ばれる)
画面サイズとfps(1秒間の描画回数)を設定
onResourceSettingメソッド(一回だけ呼ばれる)
実装を追加したメソッドです。
リソースのルートパスを設定する
リソースのキーとファイルパスの組み合わせを設定する
onLoadメソッド(一回だけ呼ばれる)
「sprite」フィールドの生成
※Rf.ETS.FrameWork.Sprite独自の書き方
リソースの設定
※Rf.ETS.FrameWork.Sprite独自の書き方
その他の設定
※enchant.jsと同じ書き方
イベント定義(タップ・クリックでspriteを落下させる)
onRunメソッド(描画ごとに呼ばれる)
「落下フラグ」フィールドがtrueの場合、「sprite」フィールドを落下させる。
画面下まで落下したらもとの場所に戻し、「落下フラグ」フィールドをfalseに設定する。
3.npm run build または gulp defaultでビルドを行います。
おわりに
今回はグラフィックの表示を行いました。
次回はより簡単にキャラクターのグラフィックを利用できるように修正します。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その3
http://kazenetu.exblog.jp/22858195/
2016-05-30T13:54:19+09:00
2016-05-30T13:54:13+09:00
2016-05-30T13:54:13+09:00
kazenetu
Node.js
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
タップ(またはクリック)すると落下する「Hello world」を表示します。
前提
ビルド環境の構築を参照して、下記を実行してください。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/03-ETS-HowTo-03/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0)
・npm(3.8.3)
実装手順
1.template/main.tsを開き、下記の実装をしてください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
//TODO プロパティやフィールドを記述してください。
private hellow:Rf.ETS.FrameWork.Label = null; //※1
private isFall:boolean = false; //※1
private fallSpeed:number = 0; //※1
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void { //※2
//サイズを320x480に変更
this.screenWidth = 320;
this.screenHeight = 480;
//fpsを設定
this.fps = 20;
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void { //※3
//ラベルを生成 //※3.1
this.hellow = new Rf.ETS.FrameWork.Label(parent);
this.hellow.text = "Hello world";
this.hellow.width = 100;
this.hellow.touchEnabled = false;
this.hellow.textAlign = "center";
this.hellow.x = 100;
this.hellow.y = 100;
this.hellow.touchEnabled = true;
//ラベルのタップで落下するイベント //※3.2
this.hellow.on(enchant.Event.TOUCH_END,(e:enchant.Event)=>{
if(this.isFall === false){
this.isFall = true;
this.fallSpeed = 2;
}
});
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void { //※4
//タップされた場合はラベルを移動させる
if(this.isFall){
this.hellow.y += this.fallSpeed;
if(this.fallSpeed < 10){
this.fallSpeed += 1;
}
if(this.hellow.y > 480){
this.hellow.y = 100;
this.isFall = false;
}
}
}
}
実装内容は以下のとおりです。
フィールドの定義 hellow
ラベルクラスisFall
落下フラグ(trueで落下状態)fallSpeed
落下スピード(2->10)
onInitializeメソッド(一回だけ呼ばれる) 画面サイズとfps(1秒間の描画回数)を設定
onLoadメソッド(一回だけ呼ばれる) 「hellow」フィールドの生成・設定
前回から追加した点は下記のコードです this.hellow.touchEnabled = true;イベント定義(タップ・クリックでラベルを落下させる)
onRunメソッド(描画ごとに呼ばれる) 「落下フラグ」フィールドがtrueの場合、「hellow」フィールドを落下させる。 画面下まで落下したらもとの場所に戻し、「落下フラグ」フィールドをfalseに設定する。
2.npm run build または gulp defaultでビルドを行います。
おわりに
今回はイベントの実装を行いました。
次回はグラフィックの表示を行います。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その2
http://kazenetu.exblog.jp/22843961/
2016-05-25T21:04:07+09:00
2016-05-25T21:04:05+09:00
2016-05-25T21:04:05+09:00
kazenetu
Node.js
はじめに
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発しています。
今回のゴール
「Hello world」を表示します。
前提
ビルド環境の構築を参照して、下記を実行してください。
・ templateフォルダの展開
・ npm installの実行
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/02-ETS-HowTo-02/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0以上)
・npm(3以上)
実装手順
1.template/main.tsを開き、Rf.ETS.FrameWork.Labelの追加を行ってください。
※処理を追加していないメソッドは除外しています。
class GameMain extends Rf.ETS.FrameWork.GameMain {
//TODO プロパティやフィールドを記述してください。
private hellow:Rf.ETS.FrameWork.Label = null;
/**
* 初期化イベント
* @method
* @name FrameWork.GameMain#onInitialize
*/
protected onInitialize(): void {
//サイズを320x480に変更
this.screenWidth = 320;
this.screenHeight = 480;
//fpsを設定
this.fps = 20;
}
/**
* ロードイベント
* @method
* @name FrameWork.GameMain#onLoad
* @param {Object} parent - 親Group
*/
protected onLoad(parent: enchant.Group): void {
//ラベルを生成
this.hellow = new Rf.ETS.FrameWork.Label(parent);
this.hellow.text = "Hello world";
this.hellow.width = 100;
this.hellow.touchEnabled = false;
this.hellow.textAlign = "center";
this.hellow.x = 100;
this.hellow.y = 0;
//TODO イベントを記述してください。
}
/**
* 実行イベント
* @method
* @name FrameWork.GameMain#onRun
*/
protected onRun(): void {
//ラベルを移動させる
this.hellow.y += 4;
if(this.hellow.y > 480){
this.hellow.y -= 480;
}
}
}
実装内容は以下のとおりです。
GameMainクラスに「hellow」フィールドを追加
onInitializeメソッド(一回だけ呼ばれる)
今回) 画面サイズとfps(1秒間の描画回数)を設定
onLoadメソッド(一回だけ呼ばれる)
今回) 「hellow」フィールドの生成・設定
onRunメソッド(描画ごとに呼ばれる)
今回) 「hellow」フィールドの移動(上から下に移動。下まで行ったら0に戻す)
2.npm run build または gulp defaultでビルドを行います。
おわりに
今回はラベルの生成と表示を行いました。
次回はイベントの実装を行います。
よかったらクリックしてください。
にほんブログ村
]]>
TypeScriptでenchant.jsを使ってサンプルを作ってみる その1
http://kazenetu.exblog.jp/22812282/
2016-05-15T18:11:11+09:00
2016-05-15T18:11:12+09:00
2016-05-15T18:11:12+09:00
kazenetu
Node.js
TypeScriptでenchant.jsを開発するためのライブラリ「ets-framework」を作成しました。
https://github.com/kazenetu/enchantjs-typescript
「starter/use-framework/template/」を使ってサンプルプログラムを開発してみます。
今回のゴール
サンプル「template」のビルド環境を構築する
ソースコード
https://github.com/kazenetu/blog-reports/tree/master/reports/01-ETS-HowTo-01/template
開発環境
下記がインストールされている前提です。
カッコ内は私の環境です。
・Node.js(5.6.0以上)
・npm(3以上)
ビルド環境を構築手順
templateフォルダのコピー
スターターキット(starter.zip)をダウンロードして展開し、「./use-framework/template」を好きなところにコピーしてください。
npm install を行い、必要なモジュールをダウンロードしてください。
npm run build または gulp defaultを行い、main.tsをビルドしmain.jsを作成します。
ビルド環境の構築が終わりました。
以降はnpm run build または gulp defaultでビルドを行います。
おわりに
今回はビルド環境の構築を行いました。
次回からコーディングを行います。
よかったらクリックしてください。
にほんブログ村
]]>
ClickOnceの実行とデバッグ実行どちらでもパラメータを取得できるようにする
http://kazenetu.exblog.jp/22592218/
2016-03-12T20:15:00+09:00
2016-03-16T19:16:21+09:00
2016-03-12T20:15:41+09:00
kazenetu
プログラム(その他)
Windowsアプリケーションの配布にClickOnceを利用することがあります。
Webサイトで配布する場合、
「URL公開URL.application?arg1=aaa&arg2=bbb」
というようにパラメータを設定することができます。
ただしIEのみという制限がつきますが、
有用である場合もあるでしょう。
パラメータによって画面の動作内容を変える仕様であるとき、
開発中でもWebサイトにあげて実行するのは手間です。
デバッグ実行でもパラメータの取得が出来る方法を今回は紹介したいと思います。
開発環境
Windows7
VisualStudio2010
プログラムの作成
Windowsアプリケーションの新規作成を行います。
デフォルトでForm1が作成されるのでこれを利用します。
○Form1.cs
パラメータを表示するためのTextBox(textBox1)をフォームに配置します。
textBox1のプロパティ変更内容
・Dock:Fill
・Multiline:true
◯Form1.cs
using System;
using System.Collections.Generic;
using System.Deployment.Application;
using System.Text;
using System.Web;
using System.Windows.Forms;
namespace ClickOnceArgsSample
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
var parameters = new Dictionary<string,string>();
var title = string.Empty;
if (ApplicationDeployment.IsNetworkDeployed)
{
///urlから呼び出された場合、QueryStringからパラメータを取得する
var queryString = ApplicationDeployment.CurrentDeployment.ActivationUri.Query;
var nameValues = HttpUtility.ParseQueryString(queryString);
foreach (string key in nameValues)
{
parameters.Add(key, nameValues[key]);
}
title = "ClickOnce";
}
else
{
//exeを直接実行された場合、コマンドライン引数からパラメータを取得する
var args = Environment.GetCommandLineArgs();
foreach (string arg in args)
{
var nameValues = HttpUtility.ParseQueryString(arg);
foreach (string key in nameValues)
{
if (key != null && nameValues[key] != null)
{
parameters.Add(key, nameValues[key]);
}
}
}
title = "デバッグ実行";
}
this.displayParameter(parameters, title);
}
/// <summary>
/// パラメータを画面のテキストボックスに表示する
/// </summary>
/// <param name="parameters"></param>
private void displayParameter(Dictionary<string, string> parameters, string title)
{
var sb = new StringBuilder();
foreach (string key in parameters.Keys)
{
sb.AppendLine(string.Format("{0} = {1}", key, parameters[key]));
}
this.textBox1.Text = sb.ToString();
this.Text = title;
}
}
}
ClickOnceの発行とWebサーバーへの配置
1.ClickOnceの発行
プロジェクトのプロパティを開き、「発行」を選択してください。
また、オプションボタンをクリックし
「URLパラメーターをアプリケーションに渡すことを許可する」にチェックを入れてください。
「今すぐ発行」または「発行ウィザード」のいずれかをクリックすることで
publishフォルダ(デフォルトの設定)が作成されます。
2.Webサーバーへの配置
publishフォルダをWebサーバにコピーしてください。
※今回はローカルにIISを立て、C:\inetpub\wwwrootにコピーしました。
VisualStudioのデバッグ設定
プロジェクトのプロパティを開き、
「デバッグ」の「コマンドライン引数」にパラメータを設定します。
複数設定する場合は半角スペースで区切ってください。
例)Arg1=aaaa Arg2=bbb
実行結果
1.ClickOnceが配置されたWebサイトでパラメータを設定した場合
IEでWebサーバーに配置した「アプリ名.application」を呼び出します
例)http://localhost/publish/ClickOnceArgsSample.application?arg1=aaa&arg2=bbb
2.デバッグ実行した場合
VisualStudioでデバッグ実行します。
参考になれば幸いです。
【2016/03/16 追記】
コードにフォームのタイトルを設定する処理を追加しました。
ClickOnce実行、デバッグ実行が分かるようにしました。
よかったらクリックしてください。
にほんブログ村]]>
RadioButtonListの改行をCSS3で設定する(VB.NET)
http://kazenetu.exblog.jp/22155781/
2016-01-12T21:23:02+09:00
2016-01-12T21:23:01+09:00
2016-01-12T21:23:01+09:00
kazenetu
プログラム(ASP.net)
ラジオボタングループを手軽に作成するためにRadioButtonListを利用することがあると思います。
便利なのですが、ラジオボタンが横並び(RepeatDirection="Horizontal")か縦並び(RepeatDirection="Vertical")のどちらかしか設定できません。
今回は横並び(RepeatDirection="Horizontal")にしたラジオボタンの途中で改行をし、複数行にしてみたいと思います。
開発環境
Windows8.1
Visual Studio2013 Express For Web
検証環境
chrome47
プログラムの作成
まずベースとなるWebFromを作っていきます。
フォームにはRadioButtonListを配置し、
ソースコードではダミーデータの作成とRadioButtonListへのバインドを行います。
◯WebForm1.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="RadioButtonListSample.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"></asp:RadioButtonList>
</div>
</form>
</body>
</html>
◯WebForm1.aspx.vb
Public Class WebForm1
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim dataSource As New DataTable()
dataSource.Columns.Add("value")
dataSource.Columns.Add("text")
For index As Integer = 0 To 10
Dim row As DataRow = dataSource.NewRow()
row("value") = index
row("text") = "text" + index.ToString("00")
dataSource.Rows.Add(row)
Next
Me.RadioButtonList1.DataTextField = "text"
Me.RadioButtonList1.DataValueField = "value"
Me.RadioButtonList1.DataSource = dataSource
Me.RadioButtonList1.DataBind()
End Sub
End Class
実行させてみるとこのような横並びのラジオボタンが表示されます。
CSS3で改行の設定
ラジオボタンの偶数項目で改行をしてみます。
◯WebForm1.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="RadioButtonListSample.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#RadioButtonList1 label:nth-of-type(even)::after{
content: " ";
display:block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"></asp:RadioButtonList>
</div>
</form>
</body>
</html>
styleタグを追加しました。
ブラウザで確認すると下記のようになります。
セレクタ「#RadioButtonList1 label:nth-of-type(even)::after」の意味は下記のとおりです。
IDがRadioButtonList1の要素(RadioButtonList1コントロールのID)の
子孫である偶数項目のlabelタグの後
設定情報は下記のとおりです。
・content: " ";
→表示内容(設定しないとafter自体無視される?)
・display:block;
→contentで設定した内容がブロックレベルで表示される。
これによって改行を実現している。
参考になれば幸いです。
よかったらクリックしてください。
にほんブログ村
]]>
https://www.excite.co.jp/
https://www.exblog.jp/
https://ssl2.excite.co.jp/