ほとんどのソーシャル ゲーム (CastleVille (c) Zynga や Magic Land (c) Woogaなど) には、木を切るなどの単純なアクションに対してプレーヤーに与えられるコインやスターなどのドゥーバーがあります。
doobers は、いくつかのトゥイーンを実行しているようです。
- 最初に彼らは飛び出して跳ねます。そして、それらの次元も跳ねます。
- その後、ベジエ曲線でスコアバーまで飛んでいきます。
非常に単純なテスト ケースと質問用のスクリーンショットを用意しました。テスト ケースは Flex です。これは私が最近使用したものだからですが、私の質問はより一般的です (ActionScript、Tween)。com.greensock.TweenMaxライブラリを使用しています。
私の問題: 2 番目のベジェ部分を実行する方法を理解しました。しかし、最初の跳ねる部分をどうやって行うのかわかりません。
MyApp.mxml (Flex である必要はなく、Flash でもかまいません):
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
applicationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
import spark.core.SpriteVisualElement;
import com.greensock.TweenMax;
import com.greensock.easing.Cubic;
private function init():void {
var g:Graphics = myComp.graphics;
g.clear();
g.beginFill(0xCCCCCC);
g.drawRect(0, 0, myComp.width, myComp.height);
g.endFill();
}
private function handleClick(event:MouseEvent):void {
var star:SpriteVisualElement = new Star();
star.x = event.localX;
star.y = event.localY;
myComp.addChild(star);
TweenMax.to(star, 1, {
delay: 2,
ease: Cubic.easeOut,
bezier: [
{x: myComp.width - star.width, y: Math.max(event.localY, myComp.height/2)},
{x: myComp.width - star.width, y: 0}
]
});
}
]]>
</fx:Script>
<mx:UIComponent id="myComp" width="100%" height="100%" click="handleClick(event)" />
</s:Application>
Star.fxg:
<?xml version='1.0' encoding='UTF-8'?>
<!-- fxg/star.fxg -->
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
<fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
<fxg:fill>
<fxg:SolidColor color="#FFFFFF"/>
</fxg:fill>
<fxg:stroke>
<fxg:SolidColorStroke
caps="none"
color="#4769C4"
joints="miter"
miterLimit="4"
weight="20"/>
</fxg:stroke>
</fxg:Path>
</fxg:Graphic>
また、最後に「ポラロイドカメラのフラッシュ」エフェクトを追加するにはどうすればよいですか？
アップデート：
LondonDrugs_MediaServices の助けを借りて (ありがとう!) ドゥーバーは今すぐスクイーズしてジャンプします (コードは以下にあります) が、まだ 3 つの未解決の問題があります:
- マウスオーバーイベントでflyTweenを実行するには?
- 最後に「ポラロイドブリッツ」トゥイーンを追加するにはどうすればよいですか?
- 最後にマウスオーバーハンドラーを削除する方法がわかりません-匿名のクロージャーであるため
また、GreenSock フォーラムに質問を投稿しました。
ヒントをありがとう
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
applicationComplete="init()">
<fx:Script>
<![CDATA[
import com.greensock.TweenMax;
import com.greensock.easing.Bounce;
import com.greensock.easing.Cubic;
import spark.core.SpriteVisualElement;
private function init():void {
var g:Graphics = myComp.graphics;
g.clear();
g.beginFill(0xCCCCCC);
g.drawRect(0, 0, myComp.width, myComp.height);
g.endFill();
}
private function handleClick(event:MouseEvent):void {
var star:SpriteVisualElement = new Star();
star.x = event.localX;
star.y = event.localY;
myComp.addChild(star);
TweenMax.to(star, 2, {
bezier: [
{x:star.x + 10, y:star.y - 20, scaleX: 1, scaleY: 1},
{x:star.x + 20, y:star.y + 20, scaleX: 1.2, scaleY: .8},
{x:star.x + 20, y:star.y + 30, scaleX: 1, scaleY: 1}],
orientToBezier: false,
ease: Bounce.easeOut
});
var flyTween:TweenMax = TweenMax.to(star, 1, {
delay: 10,
ease: Cubic.easeOut,
bezier: [
{x: myComp.width - star.width, y: Math.max(event.localY, myComp.height/2)},
{x: myComp.width - star.width, y: 0}
],
onComplete: function():void {
myComp.removeChild(star);
// XXX how to remove the mouse over handler here?
}
});
star.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
// XXX how to force flyTween to execute right now, without the delay?
flyTween.complete();
});
}
]]>
</fx:Script>
<mx:UIComponent id="myComp" width="100%" height="100%" click="handleClick(event)" />
</s:Application>
更新 2: LondonDrugs_MediaServices に感謝します。更新されたスクリーンショットとコードが再び表示されます。
doobers で遊ぶのは楽しいですが、まだ 2 つの小さな問題があります。
- （遅延した）フライトゥイーンを本当に殺さなければならないのですか？代わりに、マウスオーバーで遅延を変更する (0 に設定する) ことはできませんか?
- 最後に「カメラのフラッシュ」効果があるといいですね。それがどのように行われたか思い出せません - いくつかの標準的な Flash MX エフェクト...
MyApp.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
applicationComplete="init()">
<fx:Script>
<![CDATA[
import com.greensock.TweenMax;
import com.greensock.easing.Bounce;
import com.greensock.easing.Cubic;
import flash.filters.GlowFilter;
import spark.core.SpriteVisualElement;
private function init():void {
var g:Graphics = myComp.graphics;
g.clear();
g.beginFill(0xCCCCCC);
g.drawRect(0, 0, myComp.width, myComp.height);
g.endFill();
}
private function goFlyTween(star:DisplayObject, delay:Number = 0):void {
TweenMax.to(star, 1, {
delay: delay,
ease: Cubic.easeOut,
bezier: [
{x: myComp.width - star.width,
y: Math.max(star.y, myComp.height/2)},
{x: myComp.width - star.width, y: 0}
],
onComplete: function():void {
if(star.parent)
star.parent.removeChild(star);
}
});
}
private function handleClick(event:MouseEvent):void {
var star:SpriteVisualElement = new Star();
star.filters = [
new GlowFilter(0xffffff, 1, 4, 4, 10, 2),
new GlowFilter(0x0, 1, 1.5, 1.5, 10, 2)
];
star.x = event.localX;
star.y = event.localY;
myComp.addChild(star);
TweenMax.to(star, 2, {
bezier: [
{x:star.x + 10, y:star.y - 20, scaleX: 1, scaleY: 1},
{x:star.x + 20, y:star.y + 20, scaleX: 1.2, scaleY: .8},
{x:star.x + 20, y:star.y + 30, scaleX: 1, scaleY: 1}],
orientToBezier: false,
ease: Bounce.easeOut,
onComplete: goFlyTween,
onCompleteParams: [star, 3]
});
star.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
// instead of killing + recreating, can't we just reset the delay?
TweenMax.killTweensOf(star);
goFlyTween(star);
}, false, 0, true);
}
]]>
</fx:Script>
<mx:UIComponent id="myComp" width="100%" height="100%" click="handleClick(event)" />
</s:Application>