スキップしてメイン コンテンツに移動

投稿

2017の投稿を表示しています

Build SDL x MinGW x opengl 's application 2017y9m22day

MinGW x SDL x OpenGL で アレコレしよう。
まずは、環境の構築をする必要があります。 ただ、このタイミングでは、素直に環境構築ができませんでした。 解説します。

結論から : GLEWは自前でビルド glew を自分でビルドする必要があります。
また、glContextを生成した後で、glewを初期化する。

- mingwでビルドできるようにした、glew
https://github.com/kyorohiro/glew_mingw - SDL2 x GL のビルドファイル(ninja build)とソース
https://github.com/kyorohiro/doc_sdl2

あとは、他Platformと変わりません


GLEWのビルド http://glew.sourceforge.net/ で配布されている windows用の libは、
Visual Studio 用のようです。 ※確証はありません

なので、自分でビルドする必要があります。
mingw用のビルド方法のREADMEがあるので、その通りにやれば良いのですが、
パッチを充て必要があります。

fprintf () が見つからないといわれる 原因が standard ライブラリーを、リンクしないように GCC のOptionが指定されているからです。
https://github.com/nigels-com/glew/issues/96 にあるパッチを充てればビルドできます。
msys上で、mingw32-make をしてくださいhttp://www.mingw.org/wiki/getting_started


glContextを生成した後で、glewを初期化する。 glewを初期化しないとシグセグで落ちます。
ただ、初期化するタイミングは、glContextを生成した後のようです。※確証はありません。
なので、SDL_Render を用いた Bufferの更新とかは使えなくなります。たぶん、
かわりに、SDL_GL_SwapWindow を使うことになるかと



...

おわり


Build Option、source code は、 check following
- mingwでビルドできるようにした、glew
https://github.com/kyorohiro/glew…

About GL Texture with SDL1 and SDL2 x Emscripten and Desktop

SDL と OpenGL と Emscriptenを利用して Desktop とBrowser向けのゲームを作ろう。
で、Textureの扱いを、考える。

1-8枚の off-screen image を持っておく。シーンごとに、この off-screen imageに転送する。で、使い回す方法を取る事にした。


それはなぜか?
あと、Emscriptenで上手く動作しない使い方があったので、まとめます。
※ 2017y 9m 14d



Textureとは ゲームで使う画像の事です。テキストデータの表示も画像です。SDLでは、SDL_Surfaceとして抽象化されています。

GLで利用する際は、この画像データをハードに転送してから利用します。
基本的、ハードに転送した画像しか使えません。

一度に転送できる画像の数や容量には制限があるので、
賢く使う必要があります。


Off-screen image ここでは、画面に直接表示しないImageという意味で使います。 私のPCはGLで一度に処理できる画像の数は、8枚でした。16284x16384 のPixelの画像を扱えるようです。

なので、複数枚の小さな画像は、前もって一つにまとめておく必要があります。


SDLでのOff-screen imageの作り方
SDL_CreateRGBSurface() を利用します。
使い方は以下を参考にしてください。
SDL_BlitSurface() で、画像化したデータを追加できます。

https://github.com/kyorohiro/doc_sdl1/tree/master/sdl1_gl_textureFromRGBSurface

https://github.com/kyorohiro/doc_sdl2/tree/master/sdl1_gl_textureFromRGBSurface


SDL1 SDL2 Emscripten の差異 本題です。この記事を書いている時点では、以下のような事情があります。
- Emscripten x SDL1 だと、オフスクリーンImageに対する、SDL_BitSurface に失敗します。
- Desktop x SDL1 だと、SDL_SetAlpha(textSurface, 0, SDL_ALPHA_TRANSPARENT); を…

For WebGL, hybrid SDL1 and SDL2 with emscripten

SDL v1と v2 の両方を利用したライブラリーにしようという事は前回話したとおり
Which SDL1 or SDL2 with emscripten

そこそこ動作するようになってきた。
https://github.com/kyorohiro/cgame/tree/master/examples





SDL1 と SDL2 の違い 大きな違いはなかった。 https://wiki.libsdl.org/MigrationGuide の通り。
基本は、初期化方法と、画面の更新方法が違うくらい。

SDL1 と SDL2 の差異、Html5用と、デスクトップ用の違いは、 https://github.com/kyorohiro/cgame/tree/master/app で吸収したので
興味のある方はどうぞ。

ちなみに、SDL_ttf と SDL_image と SDL_mixer の APIは同じでした。


ビルド方法のノウハウ ビルド方法のノウハウは、Ninjaファイルを参照してください。 https://github.com/kyorohiro/cgame/blob/master/build.emcc.ninjahttps://github.com/kyorohiro/cgame/blob/master/build.gcc.ninja ninja -f build.gcc.ninja でビルドできます。




TODO kyorohiro/cgame版のWebGLで、三角形を表示するコードです。
Html5用、デスクトップ用にビルドできます。



#include <stdio.h>#include "app/capp.h"#include "core/ccore.h"int fps; int frgShader; int verShader; int program; GLfloat vertexBufferData[] = { 0.0f, 0.5f, 0.0f, -0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f }; GLshort indexData[] = { 0,1,2 }; void_onInit(CObject* context, CObject* args) { …

Create window at SDL1 and Emscripten

SDL1と Emscripten で、Windowsを表示する


//// Create Window//#include <SDL.h>#include <stdio.h>intmain( int argc, char* args[] ) { SDL_Init( SDL_INIT_EVERYTHING ); SDL_Surface* screen = NULL; screen = SDL_SetVideoMode( 640, 480, 0, SDL_HWSURFACE | SDL_DOUBLEBUF ); SDL_WM_SetCaption( "title", 0 ); SDL_Flip( screen ); #ifdef PLATFORM_EMCC#else SDL_Event event; int isQuit = 0; while(isQuit == 0) { if (SDL_PollEvent(&event)) { if (event.type == SDL_QUIT) { isQuit = 1; } } } SDL_Quit(); #endifreturn0; }
で、Window作成できた。



おわり!!






----
作成中のコード
https://github.com/kyorohiro/sdl2_doc
This codes can build for windows and mac and html5 on windows and mac

作成中のライブラリー
https://github.com/kyorohiro/cgame

ことはじめ
https://kyorohiro.blogspot.jp/2017/09/which-use-sdl1-or-sdl2-at-emscripten.html




Which SDL1 or SDL2 with emscripten

Emscripten と OpenGLを使ってゲームを作ろうと思いたって、
まずは、SDL2の基本的な使い方を試していた。
しかし、今の所は、SDL 1系 の方が、良いと思いました。 SDL2があるのに、SDL1 を選ぶのはなぜか?

# 2017y 9m7d
SDL と SDL2 が、ちゃんぽんのゲームライブラリーを作ろう 素の OpenGL の APIを直接いじるのは、大変なので、欲しい機能を抽象化してライブラリー化する事にしました。 https://github.com/kyorohiro/cgame
SDL2をベースに作成しています。ただ、これを、ブラウザー用には「SDL1」、Windows OSX用には「SDL2」を利用する形にしたいと結論しました。
なぜに?

SDLはコンピューターゲーム用のハードに近い部分のライブラリhttps://en.wikipedia.org/wiki/Simple_DirectMedia_Layer SDLは、音やグラフィック、マウスイベント、タッチイベントなどを、扱う事ができるC言語のライブラリです。  Android、 iOS、 Windows、 Mac、 Browser上で動作します。
このライブラリーを利用して書けば、作成したアプリやゲームが、ありとあらゆるPFで動作するようになります。

Emscriptenを使えば、SDLがブラウザーで動作する EmscriptenはLLVMでバイトコードを、ブラウザーで動作できるようするライブラリーです。 https://en.wikipedia.org/wiki/Emscripten
Clangを利用すれば、LLVM用のバイトコードをC言語で作れますから、 SDL系 x C系 のアプリを ブラウザーで動作させる事ができます。

SDL2は、最新のSDLhttps://wiki.libsdl.org/MigrationGuide
SDLの最新版が、SDL2.x 系です。 SDL1.2.x から、大幅に変更されました。 VideoAPI、new Sprite 2dGmae, Touch Event, IMF, Mobile PF対応 などなど、様々な機能を追加されました。


kyorohiro/cgame のブラウザー向け、SDL1 を使う事にした。 kyorohiro/cgameのブラウザ…

Scratch と C言語ようゲームライブラリ

C言語用のゲームライブラリを作成する事にした。
https://github.com/kyorohiro/cgame

C++ベースのゲームライブラリがあるが、C言語で書かれたものが、なさげだった。

きっかけ C言語の入門書を書こうと思いたった。
どのように、解説するのが良いだろうか。入門書をいくつか読んでみた。

だいたいの本は文法を紹介したり。コマンドラインを想定した標準APIを使ったりしていた。
しかし、それは、私が望むものではなかった。


Scratch 皆さんは。Scratch(https://scratch.mit.edu/) をご存知だろうか。
Scratchは、GUI のBlockを利用してゲームやアート作品を作るためのツールです。
膨大な数の作品が公開されています。


この作品を作成した子供達は、はたして、文法などを学んだのだろうか?
そんな事はしていない。
右へ動けというBlockを配置すると、Scratch猫が右に動く。
左へ動けというBlockを配置すると、Scratch猫が左に動く。
そういった、素朴な操作を繰り返す事で、 自然、高度な作品を作り上げるようになるのだ。

プログラマー的な発想 詳細は知らなくても、プログラマー的な発想があれば、プログラムが書ける。
世の中には無数のプログラムが存在しています。 プログラマーは複数の言語を利用します。 https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E%E4%B8%80%E8%A6%A7
プログラマーは新しい言語を使えるようになるために、 何度も学習を繰り返します。
しかし、ほとんどの場合は以前に学んだ言語の「xxx」は、新しい言語の「yyy」と同じだな。と理解しなおだけです。
どうように、プムログラムを書く際の、構造の組み方、抽象化の仕方は、引き続き再利用します。

逆から学ぶ そこで、文法からでなく、実際に動くプログラムを操作する事で、プログラマー的な思考を学習する事ができないか。
で、実験してみたくなりました。 https://github.com/kyorohiro/cgame の作成を開始しました。




おわり!!
.







------

Created a gitbook plugin for emscripten application

emscripten で書いたアプリをgitbookに追加したかった。
が、なかったので作成した。

https://github.com/kyorohiro/gitbook-plugin-emscripten


Gitbookとはhttps://www.gitbook.com
電子書籍を作成して公開できるWebサービスです。
Markdownで記述して、それを、Webページ、PDF、EBook への公開ができます。


Gitbook plugin  gitbook で利用できる Markdown でアレコレ記述します。
ただ、このMarkdownは、表現力が乏しいです。
https://en.wikipedia.org/wiki/Markdown

独自の表現を追加できるように、Plugin機能がサボートされています。
自分専用のタグを追加したり。文書を書き換えたりすることが出来ます。


Emscripten  C/C++ などで作成したアプリを、プラウザー上で動作させる事ができます。
https://github.com/kripken/emscripten

何ができるのだろう? という方は以下をみていただくとよいでしょう。
https://github.com/kripken/emscripten/wiki/Porting-Examples-and-Demos


C言語は最古の言語の一つで、Linuxなどは、C言語で書かれています。
古くからある言語なので、さまざまなライブラリーがC言語で作成されました。
これらを利用する事ができます。

作成したPlugin{% emscripten js="test.js", mem="test.html.js" %}{% endemscripten %}と記述する事で、作成したEmscriptenアプリをGitbookページに追加する事ができます。


ロードする間ページ遷移ができないので、その辺りが改善する必要があるかな








SDL2 x Emscripten x Windows で Ninja Build する際に注意点

今回はmakeの代わりに、Ninja Build を利用ていましす。


cc = emcc cmd = cmd /c objExt = bc appExt = html objLib = bc sep = / ruleobjcommand = ${cmd}${cc} -c $in -o $out -IC:\mingw_dev_lib\include\SDL2 -DPLATFORM_EMCC ruleexecommand = ${cmd}${cc}$in -o $out -s USE_SDL=2 subninjaevent${sep}build.ninjasubninjacreateWindow${sep}build.ninja
Windowsで、 emscripten の build.ninja ファイルを書く際は command に  "cmd /c "を入れないとビルドに失敗します。





おわり!!
.







------
試したコード
https://github.com/kyorohiro/sdl2_doc
This codes can build for windows and mac and html5 on windows and mac

作成中のライブラリー
https://github.com/kyorohiro/cgame

ことはじめ
https://kyorohiro.blogspot.jp/2017/09/which-use-sdl1-or-sdl2-at-emscripten.html


.






Create window at SDL2 and Emscripten

SDL2 と Emscripten を使い始めた。
まずは、Windowsを表示するところから。

//// Create Window//#include <SDL.h>#include <stdio.h>intmain( int argc, char* args[] ) { SDL_Init( SDL_INIT_VIDEO ); SDL_Window* window; SDL_Renderer* renderer; SDL_CreateWindowAndRenderer(600, 400, 0, &window, &renderer); SDL_SetRenderDrawColor(renderer, 255, 255, 0, 255); SDL_RenderClear(renderer); SDL_RenderPresent(renderer); SDL_Delay( 2000 ); SDL_DestroyWindow( window ); SDL_Quit(); return0; }
で、Window作成できた。



おわり!!
.







------ 試したコード
https://github.com/kyorohiro/sdl2_doc
This codes can build for windows and mac and html5 on windows and mac

作成中のライブラリー
https://github.com/kyorohiro/cgame

ことはじめ
https://kyorohiro.blogspot.jp/2017/09/which-use-sdl1-or-sdl2-at-emscripten.html


.


Dart x WebDriver Capture webpage

クローラーを作る。
ただ、最近だJavaScriptが動的にデータを読み込むパターンがあるので、
WebDriverを利用して、実際にウェブブラウザーを利用する必要がある。

Dartで試してみた。

Install brew install selenium-server-standalone
brew install chromedriver

Run 1. Run chromedriver
> chromedriver

2. Write code and capture


import'package:webdriver/core.dart'as wcore; import'package:webdriver/io.dart'as wio; import'dart:async'; import'dart:io'as io; main() async { var uri = Uri.parse('http://127.0.0.1:9515'); wcore.WebDriver driver = await wio.createDriver(uri: uri); await driver.get('http://firefirestyle.net'); await new Future.delayed(new Duration(seconds: 2)); wcore.WebElement elm = await driver.activeElement; print("${await elm.text}"); io.File f = new io.File("./out.jpg"); await f.writeAsBytes(await driver.captureScreenshotAsList()); } http://firefirestyle.net/




参考http://qiita.com/isyumi_net/items/49a7e60fed6b39377e6a

Dart x WebGL Spring Mesh

XX-CAKE!(https://www21.atwiki.jp/xxcake/)の影響を受けて、Spring機能付きのMeshを作ってみた。

https://firefirestyle.github.io/nonno/v0_0_1/index.html


とりあえず、バネ機能付のMeshを生成する部分までのコードを書いてみた。
https://github.com/kyorohiro/nonno

実際に書いて動かしてみると、これをぷるんぷるん動画作成に利用するのは、
発想がすごいよなぁ。

真似したくなる。
応用も利くし。
便利


作り込むか決めてない。
Spring Mesh の計算はGPGPU にで書けないか試してみたくはある。

PS
今の所、Dartiumのgl.readPixcel()が不調なので、
WebGLをTextureを利用して、GPGPU化する場合は、
dart2jsを通して、Chromeで確認する必要がある。

まぁ、Dart Dev Compiler  待ちですね。




Dart x AngularDart x GAE x Go で ウェブページを作ってみた

AngularDart x GAE x Go  で ウェブページを作ってみました

http://firefirestyle.net/



Twitterでログインして、投稿ができます。タグ検索をサポートしています。
機能不足ですが、今週中くらいには、現在の提供している
機能で未実装の部分は実装する予定。

ただ、投稿サイトの機能は、外して、http://k07.me の方のみにするかも

フォロー機能、タイムライン機能、メッセージ機能は
k07meには、今年の前半中には
実装する予定です。

ノウハウはあるので

Source
https://github.com/firefirestyle/engine-v01-app
https://github.com/firefirestyle/engine-v01

お金が尽きた (My money has run out)

日雇いのプログラマーになりたい人が、
ココにいますよ〜〜 (* ̄0 ̄*)ノ
A person who wants to be a day-haired programmer, I am here here ~ ~
(* ̄0 ̄*)ノ
今なら、言値で働きますよ〜
If it is now, I will work with your asking price ~
たぶん maybe

Dart x WebBluetooth x BLE Peripheral Simulator x Eddystone 's memo (1)

WebBluetoothについて、BLEの学習も兼ねて、アレコレ遊んでみます。
Dartを利用します。

型があるので、保管機能を利用することができます。Crt+Space するだけで、何ができるのかが判断できて便利です。

欠点としては、Dartium のWebBluetoothへの対応が微妙なの事です。dart:jsで変換しないと、動作確認ができません。しかし、Dart DDC対応が完了すれば、この問題もなくなります。なので、今だけの問題といえるでしょう。



# Batteryサービスから、残量を取得してみる とりあえず、Web Bluetooth x Dart で、HelloWorldをしてみる。

BLE Peripheral Simulator(https://github.com/WebBluetoothCG/ble-test-peripheral-android) は、Web Bluetooth の通信の実験相手をしてくれます。
とっても便利です。
ソースも公開されていますから、中身を見ながら、理解を深める事ができます。

BLE Peripheral Simulator の Batteryサービスから、バッテリー残量を取得して見ましょう。
※ BLE Peripheral Simulator は、GooglePlay からダウンロードできます。
https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral
※ chrome://flags よりWeb Bluetoothを有効にしてください。

===

Source
https://github.com/firefirestyle/ebook_webbluetooth_with_dart/tree/master/memo/test/hello

import'package:angular2/core.dart'; import'dart:html'as html; import'bt.dart'as b; import'dart:typed_data'; @Component(selector:'my-app', …

AngularDart で Pinterestっぽい、Layout を試して見た。

Angular Dart で Pinterestっぽい、Design を試して見ました。
https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-dynamicblock



隙間なく、四角形を詰めていくデモです。

コンストラクターで ElementRef を取得できる事がわかれば
簡単に書けますね!!

コード main.dart

import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'dart:async'; import'dart:html'as html; import'dynablock.dart'as dyna; import'dart:math'; main() { bootstrap(AppComponent); } classDynamicItemParam { int w; int h; DynamicItemParam() { Random rnd =new Random(); w = rnd.nextInt(100) +50; h = rnd.nextInt(200) +100; } } @Component( selector:'dynamicitem', template:""" xxx """, ) classDynamicItemimplements OnInit { @Input() DynamicComponent parent; @Input() int width =100; @Input() int height =200; final ElementRef element; DynamicItem(this.element) { (element.nativeElement as html.Element).style.…

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ010-012はFIXしたと見なす

三角関数(1) 万有引力をシミュレーションしてみよう
https://firebook.firefirestyle.net/presents010.html



三角関数(2) 角度を指定して移動しよう
https://firebook.firefirestyle.net/presents011.html



三角関数(3) 万有引力をシミュレーションしてみよう
https://firebook.firefirestyle.net/presents012.html



以降はGitbookを参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

AngularDart で Markdownを利用してみる

AngularDart で Markdownを利用してみた。
"#" と、@ViewChild を利用の仕方を覚えた!!

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-markdown

import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'dart:async'; import'dart:html'as html; import'package:markdown/markdown.dart'as mark; main() { bootstrap(AppComponent); } @Component( selector:'markdown-component', template:""" <div #markdowncontent></div> """, ) classMarkdownComponentimplements OnInit { @Input() String content; html.Element _contentElement; @ViewChild('markdowncontent') set main(ElementRef elementRef) { _contentElement = elementRef.nativeElement; } ngOnInit() { _contentElement.children.clear(); _contentElement.children.add(new html.Element.html( """<div>${mark.markdownToHtml(content)}</div>"&qu…

火の型 Scratchでプログラム入門 固定レイアウト版 おまけ00D-00FはFIXしたと見なす

雪を降らせてみる Scratchの clone機能を利用してみよう

https://firebook.firefirestyle.net/presents00d.html




カーソルに向かって進ませてみる Scratchの向きと前進で移動させてみよう。

https://firebook.firefirestyle.net/presents00e.html





ランダムに会話
Scratchのリスト機能を利用してみよう
https://firebook.firefirestyle.net/presents00f.html




以降はGitbookを参照してください。
https://www.gitbook.com/book/kyorohiro/firestyle/details
100pageくらいあります。

AngularDart RouteParams.params は UrlEncodeされたまま

OAuthの認証っぽいコードを書いていて、
URLの中にAccessTokenを渡すような書き方をしてみた。

その時に、渡されたパラメータが、UrlEncodeが必要な事に気がついた。


import'package:angular2/core.dart'; import'package:angular2/router.dart'; import'package:cl/config.dart'as config; @Component( selector:"myhome", template:""" <div class="mybody"> <h1>Home</h1> </div> """, styles:const[ """ .mybody { display: block; height: 600px; } """, ] ) classHomeComponentimplements OnInit { String twitterLoginUrl =""; final RouteParams _routeParams; HomeComponent(this._routeParams); config.AppConfig rootConfig = config.AppConfig.inst; ngOnInit() { twitterLoginUrl = config.AppConfig.inst.twitterLoginUrl; print(_routeParams.params.toString()); if(_routeParams.params.containsKey("token")) { config.AppConfig.inst.cookie.accessToken = Uri.decodeFull(_…

AngularDartを利用して Inputタグで画像を読み込むダイアログ。(2) 関数渡しをしてみる

前回のを、もう少し、賢くしてみました。

関数やパラメータを渡せるようにする
初期化しなくても動作するようにする
エラーメッセージ等を呼び出せるようにする


https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/image-input-dialog/app


dialog.dart

import'package:angular2/core.dart'; import'package:angular2_components/angular2_components.dart'; import'dart:html'as html; import'imageutil.dart'as imgutil; import'dart:async'; @Component( selector:'inputimage-dialog', styles:const [ """ .inputimage-dialog-title { } .inputimage-dialog-message { } .inputimage-dialog-errormessage { } .inputimage-dialog-cancelbutton{ } .inputimage-dialog-okbutton{ } """, ], template:"""<modal #wrappingModal> <material-dialog style='width:80%'> <div *ngIf='errorMessage!=""' class='inputimage-dialog-errormessage'>{{errorMessage}}</div> <h3 class='inputimage-dialo…

AngularDartを利用して Inputタグで画像を読み込むダイアログ

AngularDart を利用して、Inputタグで画像を読み込むダイアログを作ってみた。



#xxxx で、domを紐づけたりできるのを知った。

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/image-input-dialog/app


===
main.dart

import'package:angular2/platform/browser.dart'; import'package:angular2/core.dart'; import'input_img_dialog.dart';void main() { bootstrap(AppComponent); } @Component( selector:"my-app", directives:const [InputImageDialog], template:""" <div> <h1>Dialog Test</h1> <div> <button (click)='onClick(myDialoga)'>open</button> </div> <input-image-dialog #myDialoga> </input-image-dialog> </div> """ ) classAppComponentimplements OnInit { AppComponent(); ngOnInit() { } onClick(InputImageDialog _dialog) async { _dialog.open(); } }
===

input_image_dialog.dart


import'package:angular2/core.dart'; import'package:angular2_com…