<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>nouv.labo &#187; Flash Hacks</title>
	<atom:link href="http://nouv.biz/wp/tag/flash-hacks/feed/" rel="self" type="application/rss+xml" />
	<link>http://nouv.biz/wp</link>
	<description>nouv.biz 代表の戯言</description>
	<lastBuildDate>Sat, 05 Nov 2022 10:11:22 +0000</lastBuildDate>
	<language>ja</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=3.9.40</generator>
	<item>
		<title>フレームレートとパフォーマンスモニタについて</title>
		<link>http://nouv.biz/wp/2012/10/06/%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%ac%e3%83%bc%e3%83%88%e3%81%a8%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9%e3%83%a2%e3%83%8b%e3%82%bf%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/</link>
		<comments>http://nouv.biz/wp/2012/10/06/%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%ac%e3%83%bc%e3%83%88%e3%81%a8%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9%e3%83%a2%e3%83%8b%e3%82%bf%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#comments</comments>
		<pubDate>Sat, 06 Oct 2012 10:25:52 +0000</pubDate>
		<dc:creator><![CDATA[nouv]]></dc:creator>
				<category><![CDATA[ActionScript3]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Flash Hacks]]></category>
		<category><![CDATA[JavaScriptグラフィックス]]></category>

		<guid isPermaLink="false">http://nouv.biz/wp/?p=169</guid>
		
        

        <description><![CDATA[<p>フレームレートとは元々は映像で用いられる言葉である。<br />
アニメーションなどで1秒間に何コマ絵を動かしますか、という意味だ。1秒間に24コマの場合は24FPS（フレームパーセコンド）などと表される。FlashやJavaScriptなどで動作させるアニメーションでも用いられることが多い。</p>
<p>このフレームレート、Flashの場合直接フレームレートの指定が可能（デフォルトは12）だが、Javascriptの場合はtimer(setTimeoutなど）で逆算して指定することになる。<br />
timerはブラウザにより大きく性能が異なるため、ゲーム等を制作する場合大きな障害となる。例えばキャラクタが画面を移動するとき、あるブラウザでは0.5秒かかり、別のブラウザでは2秒かかるなど、差異が大きすぎるとゲームとして成立しない。</p>
<p>この問題はオライリー・ジャパンの<a href="http://www.amazon.co.jp/gp/product/4873115280/ref=as_li_tf_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873115280&amp;linkCode=as2&amp;tag=nouvlog-22" target="_blank">「JavaScriptグラフィックス」</a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.jp/e/ir?t=nouvlog-22&amp;l=as2&amp;o=9&amp;a=4873115280" alt="" width="1" height="1" border="0" />では以下の方法で対処している。</p>
<ol>
<li>どの程度のフレームレートが実現しているか調べる</li>
<li>実現したい速度と実際の速度の比率（＝係数）を調べる</li>
<li>1フレームあたりのキャラクターの移動距離を標準の距離×係数で再設定する</li>
<li>フレーム毎にキャラクターを再設定した距離移動させる</li>
</ol>
<p>一方Flashサイトの場合、ゲーム用途よりバナーやトップページフラッシュなど演出目的のものが多いため、滑らかな動作が重要視される。滑らかに動かした方がより高級感を醸し出せるからだ。<br />
滑らかに動かすためには、アニメーションは1秒のコマ数を増やせばよい。そこで多くの製作者は極力高いフレームレートを設定することになる。</p>
<p>ところが高くすればするほどパソコンに負荷がかかり、スペックの低いパソコンでは設定したフレームレートの半分も出せないことがある。結果カクカクした動きになっしまう。</p>
<p>その対策については、こちらもオライリー・ジャパンの<a href="http://www.amazon.co.jp/gp/product/4873112354/ref=as_li_tf_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873112354&amp;linkCode=as2&amp;tag=nouvlog-22" target="_blank">「Flash Hacks」</a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.jp/e/ir?t=nouvlog-22&amp;l=as2&amp;o=9&amp;a=4873112354" alt="" width="1" height="1" border="0" />にわかりやすく記載されている。<br />
まず上記１同様、「どの程度のフレームレートが実現しているか」を調べ、オブジェクトが多数動くことが負担になっている場合は、動作しているオブジェクト（キャラクターや粒子など）の数を減らしている。<br />
上記書籍は2005年発売でActionScript1.0又は2.0で記述されているので、今回はActionScript3.0に置き換えつつ、より実践的にしたPerformanceMonitorクラスを作成した。<br />
<a title="performance monitor sample" href="http://nouv.biz/labo/20121004_performance_montor/" target="_blank">以下</a>がそのサンプルとなる(<a href="http://nouv.biz/labo/20121004_performance_montor/">http://nouv.biz/labo/20121004_performance_montor/</a>)。<br />
大量のパーティクル（粒子）を生成し、ランダムにY回転させている(重いので他作業中の方は注意）。<br />
<a href="http://nouv.biz/labo/20121004_performance_montor/" target="_blank"><img class="aligncenter size-full wp-image-182" title="particle100000" src="http://nouv.biz/wp/wp-content/uploads/2012/10/particle100000.jpg" alt="" width="500" height="327" /></a></p>
<p>右下に、実現しているフレームレートと、パーティクルの数を表示している。<br />
フレームレートは24FPS、パーティクルの初期生成数は10万個を初期値にしているが、フレームレートが24フレームに達しないと、序々にパーティクルの個数を減らし調整する。</p>
<p>フレームレートが目標に達しているか調査する部分のスクリプトを以下に記載。</p>
<pre>  private function onEnterframe(event:Event):void {
   var nowTime:Number = new Date().getTime();
   var pastTime = nowTime-oldTime ; 
   var fps:Number = 1000 / pastTime;

   if (interCount &gt; 100) {
    //過去の累積が悪影響をおよぼすので、ある程度の回数でクリアする
     totalFPS = 0;
     interCount = 0;
   }
   totalFPS += fps;
   interCount++;
   oldTime = nowTime;
  }

  /*
   * 
   */
  public function get _averageFps():int {
   var averageFPS:Number = Math.floor(totalFPS / interCount );
   return averageFPS;
  }

  /**
   *達成したいフレームレートを指定する
   * 達成できているかどうかを返す
   */
  public function fpsBool(targetFPS:int):Boolean {
   var bool:Boolean;
   if (_averageFps &gt;= targetFPS) {
    bool = true;
   }else {
    bool = false;
   }
   return bool;
  }</pre>
<p>現時刻から前に通過した時刻を引き、そこからフレームレートを求めその値を返す。<br />
一方、パーティクルはその結果を受けて個数調整を行なっている。<br />
numBallsは生成するパーティクルの個数。上限下限を設けている。</p>
<pre>	
performanceBool = performanceMonitor.fpsBool(24);
if (!performanceBool) {
	numBalls = (numBalls - 100) &gt; 0? numBalls - 100 : numBalls;
}else {
	numBalls = (numBalls + 100) &lt;= makeNum ? numBalls + 100 : makeNum;
}</pre>
<p>&nbsp;</p>
<p><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=nouvlog-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4873112354&amp;ref=tf_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="320" height="240"></iframe></p>
<p><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=nouvlog-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4873115280&amp;ref=tf_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="320" height="240"></iframe></p>
]]></description>        
        
        
				<content:encoded><![CDATA[<p>フレームレートとは元々は映像で用いられる言葉である。<br />
アニメーションなどで1秒間に何コマ絵を動かしますか、という意味だ。1秒間に24コマの場合は24FPS（フレームパーセコンド）などと表される。FlashやJavaScriptなどで動作させるアニメーションでも用いられることが多い。</p>
<p>このフレームレート、Flashの場合直接フレームレートの指定が可能（デフォルトは12）だが、Javascriptの場合はtimer(setTimeoutなど）で逆算して指定することになる。<br />
timerはブラウザにより大きく性能が異なるため、ゲーム等を制作する場合大きな障害となる。例えばキャラクタが画面を移動するとき、あるブラウザでは0.5秒かかり、別のブラウザでは2秒かかるなど、差異が大きすぎるとゲームとして成立しない。</p>
<p>この問題はオライリー・ジャパンの<a href="http://www.amazon.co.jp/gp/product/4873115280/ref=as_li_tf_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873115280&amp;linkCode=as2&amp;tag=nouvlog-22" target="_blank">「JavaScriptグラフィックス」</a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.jp/e/ir?t=nouvlog-22&amp;l=as2&amp;o=9&amp;a=4873115280" alt="" width="1" height="1" border="0" />では以下の方法で対処している。</p>
<ol>
<li>どの程度のフレームレートが実現しているか調べる</li>
<li>実現したい速度と実際の速度の比率（＝係数）を調べる</li>
<li>1フレームあたりのキャラクターの移動距離を標準の距離×係数で再設定する</li>
<li>フレーム毎にキャラクターを再設定した距離移動させる</li>
</ol>
<p>一方Flashサイトの場合、ゲーム用途よりバナーやトップページフラッシュなど演出目的のものが多いため、滑らかな動作が重要視される。滑らかに動かした方がより高級感を醸し出せるからだ。<br />
滑らかに動かすためには、アニメーションは1秒のコマ数を増やせばよい。そこで多くの製作者は極力高いフレームレートを設定することになる。</p>
<p>ところが高くすればするほどパソコンに負荷がかかり、スペックの低いパソコンでは設定したフレームレートの半分も出せないことがある。結果カクカクした動きになっしまう。</p>
<p>その対策については、こちらもオライリー・ジャパンの<a href="http://www.amazon.co.jp/gp/product/4873112354/ref=as_li_tf_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873112354&amp;linkCode=as2&amp;tag=nouvlog-22" target="_blank">「Flash Hacks」</a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.jp/e/ir?t=nouvlog-22&amp;l=as2&amp;o=9&amp;a=4873112354" alt="" width="1" height="1" border="0" />にわかりやすく記載されている。<br />
まず上記１同様、「どの程度のフレームレートが実現しているか」を調べ、オブジェクトが多数動くことが負担になっている場合は、動作しているオブジェクト（キャラクターや粒子など）の数を減らしている。<br />
上記書籍は2005年発売でActionScript1.0又は2.0で記述されているので、今回はActionScript3.0に置き換えつつ、より実践的にしたPerformanceMonitorクラスを作成した。<br />
<a title="performance monitor sample" href="http://nouv.biz/labo/20121004_performance_montor/" target="_blank">以下</a>がそのサンプルとなる(<a href="http://nouv.biz/labo/20121004_performance_montor/">http://nouv.biz/labo/20121004_performance_montor/</a>)。<br />
大量のパーティクル（粒子）を生成し、ランダムにY回転させている(重いので他作業中の方は注意）。<br />
<a href="http://nouv.biz/labo/20121004_performance_montor/" target="_blank"><img class="aligncenter size-full wp-image-182" title="particle100000" src="http://nouv.biz/wp/wp-content/uploads/2012/10/particle100000.jpg" alt="" width="500" height="327" /></a></p>
<p>右下に、実現しているフレームレートと、パーティクルの数を表示している。<br />
フレームレートは24FPS、パーティクルの初期生成数は10万個を初期値にしているが、フレームレートが24フレームに達しないと、序々にパーティクルの個数を減らし調整する。</p>
<p>フレームレートが目標に達しているか調査する部分のスクリプトを以下に記載。</p>
<pre>  private function onEnterframe(event:Event):void {
   var nowTime:Number = new Date().getTime();
   var pastTime = nowTime-oldTime ; 
   var fps:Number = 1000 / pastTime;

   if (interCount &gt; 100) {
    //過去の累積が悪影響をおよぼすので、ある程度の回数でクリアする
     totalFPS = 0;
     interCount = 0;
   }
   totalFPS += fps;
   interCount++;
   oldTime = nowTime;
  }

  /*
   * 
   */
  public function get _averageFps():int {
   var averageFPS:Number = Math.floor(totalFPS / interCount );
   return averageFPS;
  }

  /**
   *達成したいフレームレートを指定する
   * 達成できているかどうかを返す
   */
  public function fpsBool(targetFPS:int):Boolean {
   var bool:Boolean;
   if (_averageFps &gt;= targetFPS) {
    bool = true;
   }else {
    bool = false;
   }
   return bool;
  }</pre>
<p>現時刻から前に通過した時刻を引き、そこからフレームレートを求めその値を返す。<br />
一方、パーティクルはその結果を受けて個数調整を行なっている。<br />
numBallsは生成するパーティクルの個数。上限下限を設けている。</p>
<pre>	
performanceBool = performanceMonitor.fpsBool(24);
if (!performanceBool) {
	numBalls = (numBalls - 100) &gt; 0? numBalls - 100 : numBalls;
}else {
	numBalls = (numBalls + 100) &lt;= makeNum ? numBalls + 100 : makeNum;
}</pre>
<p>&nbsp;</p>
<p><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=nouvlog-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4873112354&amp;ref=tf_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="320" height="240"></iframe></p>
<p><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=nouvlog-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4873115280&amp;ref=tf_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="320" height="240"></iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://nouv.biz/wp/2012/10/06/%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%ac%e3%83%bc%e3%83%88%e3%81%a8%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9%e3%83%a2%e3%83%8b%e3%82%bf%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
