Stage3D: 2D Particle Random Motion [optimized]

I just updated some code of my last demo and optimized it by reducing draw calls.
Now it can render over large number of particle(500,000+).

Here are some optimization:

• reduce draw call
• upload minimum of constants

Try it!!

[Optimized] 2D Particle Random Motion for Stage3D - wonderfl build flash online

Stage3D Limitation and Optimization

Stage3D AGAL Limitation:

• The VertexBuffer is limited to 65535 vertex.
• The IndexBuffer is limited to 983040 index.
• In theory, you could have up to 983040/3 = 327680 triangle in one draw call.
• In particle(using quads), you could have up to 65535/4 = 16383 particle max per draw call.
• Shaders length can only contain a maximum of 200 opcodes.
• The drawTriangles limited to 32768 calls per present call.

Optimization:

• reduce draw call.
• reuse material and batch rendering.
• upload minimum number of constants.

Stage3D: 2D Particle Random Motion

2D particle random motion for Stage3D,
Here is a demo with 5000 particles.

2D Particle Random Motion for Stage3D - wonderfl build flash online

Drop Multiple MySQL tables

You can show tables with wildcard character on MySQL server.
ie: SHOW TABLES LIKE 'PREFIX_%';

But can't drop multiple tables with '%'.

[HowTo]
For shell script:

for T in `echo "SHOW TABLES" |mysql db|grep "^PREFIX_"`; do echo "DROP TABLE $T;"|mysql db;done

enjoy it.
:D

How to play Away3D on mobile phone

Last week I played Away3D on my old iphone 3GS for fun(see my previous post).
Now, you can download the full source from here,
or get ipa and apk file to test on your mobile.

Here is the web demo.

Away3D on mobile phone demo - wonderfl build flash online

How to monitor google analytics for iOS and Android

目前監控 mobile app tracking traffic 常用 proxy monitor 的方式，
不過這種方式常常會出現很謎的狀況，
ie: 有時有抓到資料，有時沒有...
造成開發者與分析師間鬼打牆的狀況...

最準確的方式還是用老方法直接截取封包，
以前用 tcpdump 很苦還要自己解析資料，
幸好現在有 ngrep 好用...XD

Away3D on mobile phones (Android/iOS)

Away3D Gold v4.0.9 + AIR 3.2

Screenshots
iPad2 iOS 5.1.1:

How to deploy adobe air to iOS: Part1

如何發佈 Adobe AIR 到 iOS 裝置(ipad/iphone)教學

Part1: How to get your *.mobileprovision and *.p12 files.

Member Center
goto https://developer.apple.com

Away3D + Flint 3D Particles Demo: Cloud Effect

Away3D + Flint 3D Particles Demo: Cloud(Fog) Effect

版本:
Away3D v4.0.9
Flint v4.0.1

先來看 demo 圖

重點如下:

建立: view = new View3D();

設定背景: view.backgroundColor = 0x222233;

設定 antiAlias(ie: 2,4,16): view.antiAlias = 4; 

Away3D 4.0.X Gold basics

Away3D 4.0.X Gold 基本教學

之前有寫過幾篇 Away3D 的教學與應用，
新版 4.0.X 後 API 有些許的調整，重新翻了一下文件。

Away3D 基本流程如下：

• scene
• camera
• view
• light
• add 3D Object(3D Object -> Mesh -> 面 ->頂點)
• render

cloud effect with perlinNoise

雲霧效果教學
scrolling BitmapData +  perlinNoise

首先產生可以連續捲動的雲(BitmapData)，
先回憶一下 perlinNoise 語法：
perlinNoise(periodX, periodY, numOctaves, seed, stitch, fractalNoise, channelOptions, grayScale);
stitch：true 平滑影像邊緣，以建立無接縫的拼貼紋理，適用於水波。
fractalNoise：true 平滑化該效果的邊緣，適用於雲霧，false 明顯不連續的漸層，
適用於火焰和海浪。

AGAL quick reference guide

AGAL 教學 備忘

Vertex Shader：
va0-va7：vertex attribute registers, set with context3D.setVertexBufferAt(...)
vc0-vc127：vertex constant registers, set with context3D.setProgramConstantsFromMatrix/Vector(Context3DProgramType.VERTEX, ...)
vt0-vt7：vertex temporary registers with xyzw component (ex: add vt0, va0, vc0)
v0-v7：varying registers, pass values to the fragment shader (ex: mov v0, va0)
op：output point (ex: mov op, va0)

Fragment Shader：
fc0-fc127：fragment constants set with context3D.setProgramConstantsFromMatrix/Vector(Context3DProgramType.FRAGMENT,...)
fs0-fs7：fragment(texture) sampler, set with context3D.setTextureAt(__sampler, __textureBmpd)
v0-v7：varying registers, values passed from the vertex shader (ex: mov oc, v0)
ft0-ft7：fragment temporary registers with xyzw component (ex: tex ft0, v0, fs0<2d,linear,nomip,repeat>)
oc：output color (ex: mov oc, ft0)

Introduction to Stage3D: Part 7

Introduction to Stage3D: Part 7
fire effect for stage3d tutorial
火/火球/火焰 效果教學

本篇是 Stage3D 的應用，
如果對 Stage3D 運作還不是很清楚，可以先看前幾篇入門文章。

在前一篇火焰效果教學，
是用 CPU Render 的方式處理效果，
接下來會用到 Stage3D GPU Render 運算功能來呈現火焰效果，

fire effect performance tuning

火及火焰效果調校教學

一直以來都會需要用到火/火焰特效，
筆記一下調校心得，
順便試用 wonderfl online coding，

幾個重點如下：
filter：加強效果
this.filters = [new BlurFilter(4, 16, 1)];

blendMode：加強效果
this.blendMode = "add";

javascript html5 flash on union socket server

javascript/html5 flash on union socket server 教學
nodejs 這陣子相當熱門，
加上 Socket.IO 的應用，
開始有不少活動朝這個方向發展。

其實 flash(player 6?) 很早就支援 xmlsocket，
早期玩過的幾個 socket server，
印象最深的就是 Colin Moock 所開發的 unity server，
目前已改名為 union platform，

ActionScript IDE for mac osx

ActionScript IDE 編輯器比較 for mac osx

monodevelop
與 haxe nme 整合最好
auto code completion
缺少 auto import class

sublime text 2
最近相當熱門的 IDE 編輯器，擁有相當強大的擴充功能
Ctrl+Shift+B：auto create hxml(內容還是要自己編..XD)
Ctrl+B：build
Ctrl+i：auto import class
缺少 auto code completion

mac osx memo

記錄一下拿到 MacBook Pro 安裝的軟體
xCode
command line tools(主要是會用到 gcc)
homebrew(wget/most/screen...etc.)
synergy(share keyboard and mouse)
StartNinja(remove startup sound)
iTerm
Adium

bash setting
.profiile
.bashrc
.inputrc
.screenrc

接下來是 as coding 相關的
flex sdk
flash debug standalone player
java

接下來剩裝好 IDE 編輯器，
就差不多可以工作了..XD

20130815 update:
see more..
http://flashisobar.blogspot.tw/2013/08/switching-from-bash-to-zsh-on-osx.html

flint particle system：Part4

本篇文章算是前兩篇的應用，
模擬音符從空中落下，
當滑鼠觸控到音符，會發出聲響，並產生小火花，
另外，當音符掉落至底部時也會有同樣的效果。

flint particle system：Part3

flint sparkler effect

火花效果
煙火效果
與前一篇雪花效果不同的地方在於，
emitter Counter 這次是一次性的，也就是 Blast
renderer 採用 BitmapRenderer，
並監聽滑鼠事件，當 click 時產生火花。

flint particle system：Part2

flint 粒子系統教學：Part2
前一篇已大致說明 flint 粒子系統原理，
emitter -> particle -> renderer

TimelineLite/TimelineMax memo

TimelineLite/TimelineMax
append
appendMultiple
加在時間軸的後面

prepend
prependMultiple
加在時間軸的前面

insert
insertMultiple
加在特定的時間軸中

flint particle system：Part1

flint 粒子系統教學：Part1
早期因工作需要有用過 2.x 版，
記得當時商業使用是要收費?
而且效能不符合當時的需求。

flash mosaic photo effect

馬賽克拼磚(拼圖)效果

原圖用 10x10 的格子切割，
找出每個格子的代表色，
接著需載入夠多的圖檔作為圖庫(最少100張)，
並計算每個圖檔的平均色，
從圖庫中找出最接近每個格子代表色的圖檔，
進行拼貼。

flash pixel effect

pixel 效果教學，
也可以拿來當作馬賽克(mosaic)效果，

原圖用 10x10 的格子切割，
再用 getPixel 取出每個格子的代表色，
依序填入顏色方塊，就是最簡單的馬賽克效果。

as3 carousel effect

flash 旋轉木馬的效果有很多方式可以實做出來，
從早期用  2D 的方式去模擬，
到後來用 pv3d or away3d 很多 3D framework 都可以辦到。

本篇文章用 flash 內建的 3D 功能來實做，

Introduction to Stage3D: Part 6

perspective projections
透視投影基本介紹及教學

右手座標系 RH:
+x is right
+y is up
-z is into the screen
順時針為正面，逆時針為背面

Introduction to Stage3D: Part 5

Stage3D 基本介紹及教學

之前的例子都是在幾何圖形上渲染上不同的顏色，
這篇介紹如何在圖形上貼上材質，
進入貼圖之前，先說明一下 UV(U,V) 座標對應，
U 水平 V 垂直，以百分比描述。

Google analytics: tracking user time spent

如何用 GA tracking 使用者載入網站(檔案)的時間

PM 常常為了客戶活動網站，使用者載入瀏覽到底會不會很慢，
搞得一個頭兩個大。
不要吵~~ GA tracking 一下就知道啦!!

Introduction to Stage3D: Part 4

Stage3D 基本介紹及教學

建立 camera，
控制 camera 旋轉
沿 Y 軸旋轉
var dx:Number = _stage.mouseX - _lastMouseX;
_mat.prependRotation((dx/_stage.stageWidth)*360, Vector3D.Y_AXIS);

Introduction to Stage3D: Part3

Stage3D 基本介紹及教學
物件透過變形與透視可以呈現出 3D 顯示效果，

Matrix3D 處理 3D 變形
m = new Matrix3D();
沿著 Y 軸旋轉
m.appendRotation(getTimer()/30, Vector3D.Y_AXIS);
沿著 X 軸旋轉
m.appendRotation(getTimer()/10, Vector3D.X_AXIS);
沿著 Z 軸方向平移 2
m.appendTranslation(0, 0, 2);

Introduction to Stage3D: Part 2

Stage3D 基本介紹及教學
總結一下上篇 Stage3D 的流程

1. 取得 context3D
2. 設定 viewport
3. 建立頂點"緩衝區"/定義頂點資料/上傳頂點資料
4. 建立索引"緩衝區"/定義索引資料/上傳索引資料
5. 設定暫存器
6. 建立頂點及片段著色器程式
7. 上傳 AGAL bytecode
8. 顯示結果於螢幕/drawTriangles and present.

Introduction to Stage3D: Part 1

Stage3D 基本介紹及教學
Stage3D 簡單講就是提供 API 讓 Flash 可以使用 GPU 進行 3D 硬體加速以提升效能，

架構示意圖
　　　GPU　　　
OpenGL or DirectX
　　Stage3D　　

顯示的順序如下，
Stage(最上層為傳統的 flash 顯示層)
Stage3D[2]
Stage3D[1]
Stage3D[0]
StageVideo

facebook cover photo image url

最簡單的方法就是直接
parsing facebook 個人頁
以 zuck 為例

flash simulate low bandwidth

flash 發佈時，需測試低頻寬下 loading 的狀況，
之前是用 ccproxy 但常被防毒軟體誤判，
改用 sloppy 簡單用好用。

starling-extension-particle-system

starling with 粒子系統(火焰/燃燒/煙霧/雪花效果)

first edit the particle
幸好有線上版的..XD
http://onebyonedesign.com/flash/particleeditor/
save it

water effect using perlinNoise and DisplacementMapFilter

水波/流體效果

說明如下，
1. 利用 BitmapData perlinNoise 生出雜點紋理圖像
2. 產生可 loop 的參考圖像
3. 捲動參考圖像，參考紅綠兩個 channel

fisheye effect using DisplacementMapFilter

flash 要做出魚眼效果，在 flash8 以前的時代是非常痛苦的事，
不過現在有了 DisplacementMapFilter 這件事比變得簡單多了，
另外還有 Pixel Bender 也可以做到魚眼效果，但這兩個的原理不太一樣，
我自己的測試，Pixel Bender 的效能更好，但要 flash player 10 後
才有支援。

限制 Flash TextField 輸入字數及行數

監聽 TextEvent.TEXT_INPUT 事件，
超過字數及行數使用 e.preventDefault 取消事件。
完整 code 如下：

Remove windows-style line breaks

// 移除換行符號
p_string.replace(/[\r\n]+/g, '');

2D physics：Using Starling with Nape

Using Starling with official pure Nape swcs,

要試玩 starling framework 最簡單的方式就是去安裝
新版的 FlashDevelop(目前是 4.0.2RTM)，
會自動把 Flex SDK 4.6 / AIR SDK 3.2 / flash debug player 11.2 通通裝好，

接著安裝 starling
download starling 1.1
http://github.com/PrimaryFeather/Starling-Framework/zipball/v1.1

安裝 Stats 方便觀察 FPS
download Mrdoom's Stats for starling
http://www.kouma.fr/files/stats.zip

安裝 nape
download nape 9.1(as3 debug build swc)
http://deltaluca.me.uk/docnew/

how to pass JSON thru flashvars?

如何透過 flashvars 傳遞 JSON 字串?

[in html]
var flashvars = {
  conf_txt: '{ "x":"100", "y":"50", "txt":"this is test" }'
}

[in flash]
var o:Object = JSON.decode(this.loaderInfo.parameters.conf_txt))
trace(o.x, o.y, o.txt);// 100, 50, this is test

but...如果有中文字的話...就會爆炸...

how to tag and link name in a facebook message using flash(as3)

此方法已失效

facebook 訊息中標記人名(@人名)
常用 twitter 的朋友應該知道 @someone 這種寫法，
facebook 訊息也支援這種方式，
手動打 "@someone" 在 facebook 裡會 work，
但程式如果照這種方式送，很抱歉不會鳥你。

正確的格式是
@[friendId :friendName]

how to tag people(friends) in a facebook photo using flash(as3)

facebook 上傳照片時如何 tag 朋友?

可以用 tags 這個這個屬性，
tags:JSON.encode([ { "tag_uid":_friendId, "x":0, "y":0 } ])

說明如下，
tag_uid: friend id
tag_text: some text
x: 水平x座標，百分比[0-100]
y: 垂直y座標，百分比[0-100]

*注意* 最後記得要 JSON.encode 成字串

完整範例如下

how to enable gzip on dotcloud

put nginx.conf at the root of application.
cat nginx.conf
gzip on;
gzip_http_version 1.0;
gzip_types text/plain application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript font/truetype;
gzip_disable "MSIE [1-6]\.";

now restart nginx.
dotcloud run app.www sudo /etc/init.d/nginx restart

enjoy it.

how to get string unicode range

You can use "charCodeAt" to get numeric Unicode character code and covert it to 16 hex.

sublime text 2 tips

sublime text 2
一定要用它超好用的 multi-selection 功能

ctrl+alt+up/down：開啟 select lines 功能
alt+shift+方向鍵 or shift+方向鍵：select words
ctrl+mouse click：開啟 multi-selection 功能

游標在要選取的文字上，ctrl+d 逐一選取文件中相同的文字
游標在要選取的文字上，alt+F3 選取文件中所有相同的文字

其它常用的功能
ctrl+shift+p：command mode
ctrl+p：切換 folder 裡的檔案
alt+Number：切換分頁
ctrl+r：@goto symbol/definition
ctrl+alt+a：alignment

sublime text 2 build swf

sublime text 2 build swf

ctrl+shift+p
install package for actionscript3

tools->build system->new build system
{
"cmd": ["d:\\Data\\Data\\My documents\\ProgramFiles\\flex_sdk_4.5.1\\bin\\mxmlc.exe", "${file}"],
"selector": "source.actionscript",
"encoding": "big5"
}
save as ActionScript.sublime-build
c:\Users\XXX\AppData\Roaming\Sublime Text 2\Packages\ActionScript 3\

不設 encoding 會噴
Decode error - output not utf-8

ctrl+b or F7
compile as3

dotcloud

試用 dotcloud + php

基本上就是照官方文件裝

cygwin 真是好用到爆炸，簡直不用再另外裝 linux 了，

直接在 windows 上用，我還另外裝了 vim/screen。

fileReference upload manager

久沒用記一下..XD

swffix ie9 scrollbar bug fixed

add to head
<style type="text/css">
object{
position: absolute;
outline: none;
}
 </style>

Gaia Dynamic Externalized Assets

Gaia Dynamic Externalized Assets

in site.xml
add
<asset id="manImages" src="xml/manImages.xml"/>

in manImages.xml
<assets>
<asset id="m0" pic="images/man/0.jpg" />
<asset id="m1" pic="images/man/1.jpg" />
<asset id="m2" pic="images/man/2.jpg" />
</assets>

now, you can dynamic add assets.
var assetNodes:XMLList = IXml(assets.manImages).xml.asset;
var gamePage:IPageAsset = Gaia.api.getPage(Pages.GAME);
Gaia.api.addAssets(assetNodes, gamePage);

done.

facebook 貼牆訊息如何換行

換行請用 \n
參考這裡：
http://forum.developers.facebook.net/viewtopic.php?id=45931

update: 相簿描述也適用

embedding font in as3

已經用好一陣子了，
最近重新使用的時候遇到一些小問題，隨手記下來。

小工具，flash中文字體嵌入助手
http://kevincao.com/2010/07/hanfont/
可以自動產生unicodeRange，相當方便。

gaia preload setting

in preload.fla
設定 scaffold color effect=None
設定 PreloaderScaffold 的 outline layer=Guide
並新開一層 layer 加入新的 loading 特效.

in pages.PreloaderScaffold.as
調整 onResize function
private function onResize(event:Event = null):void
{
  //x = (Gaia.api.getWidth() - width) / 2;
  //y = (Gaia.api.getHeight() - height) / 2;
}
完整 code 如下：

AutoHotKey note

隨手記~~
hotkeys：快捷鍵
^::ctrl
!::alt
#::win

ie：
^!n::ctrl+alt+n
#z::win+z

flashpunk LinearMotion usage

幾個地方要注意
// auto remove when it has finished
var myTween = new LinearMotion(null, Tween.ONESHOT);

// auto stop and run myComplete when is has finished
var myTween = new LinearMotion(myComplete);

myTween.setMotion(to_x, 340, to_x, 300, 0.5, Ease.quadOut);

// don't start immediately
addTween(myTween, false);

you can check myTween.active in update().
完整範例如下：

flashpunk tips

// debug 超好用呀~~
// press ~ : toggle the debug Console on/off.
FP.console.enable();

// global objects
FP.stage
FP.width
FP.height
FP.halfWidth
FP.halfHeight