Remote collision detection (for games)

Hello all, so I have been pretty active on the “create games” front but not so much for blogging, sorry about that… So I come to you now with a Pen that razed over 1500+ views on codepen and 14 hearts so far…

It’s my implementation of a remote collision detection system that uses degrees instead of bounding boxes. This works well for games where you want to calculate the position of the shoot but the “cannon/lazer/fazer/tower” is not near the target, so instead of creating long bounding-boxes. We just calculate the degrees between the source (cannon) and the target(enemy). And when the cannon is rotated on those degrees it can fire.

Here I will show how a tank can “detect” the enemy. Here’s a quick example and the code will follow:

See the Pen Remote collision detection by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Applying an effect to a popup in Flex (open,close)

This is an effect I made to make popups appear and disappear in a cooler way…

u can view an example here right click for source code…

also posting the code here just in case…

the mxml code for the main application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” viewSourceURL=”srcview/index.html” backgroundColor=”0xffffff”>

<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

private function launchDiag1():void
{
var win:diagBox = PopUpManager.createPopUp(this, diagBox, true) as diagBox;
PopUpManager.centerPopUp(win);
}
]]>
</mx:Script>

<mx:Canvas height=”100%” width=”100%”>

<mx:Button click=”launchDiag1()” label=”Play!” verticalCenter=”0″ left=”50″ height=”80″ width=”100″/>

</mx:Canvas>
</mx:Application>

//=================================================

Now the popup code: ( create a new mxml component first, and name it diagBox)

<?xml version=”1.0″ encoding=”utf-8″?>
<!– diagBox.mxml –>

<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
showCloseButton=”true”
width=”550″
height=”500″
close=”titleWindow_close();” backgroundAlpha=”0.0″ borderAlpha=”0.0″ creationComplete=”openingEffect.play();”
shadowDirection=”center” shadowDistance=”0″ borderStyle=”none”>

<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
import mx.effects.easing.*;

private function titleWindow_close():void {
shutdownEffect.play();

}

public function endDiag():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>

<mx:Style>
.header
{
color:#ffffff;
}
</mx:Style>

<mx:Sequence id=”openingEffect” target=”{panel}” effectStart=”panel.visible=true”>
<mx:Pause duration=”400″/>
<mx:Resize id=”expand” widthTo=”500″ duration=”300″ easingFunction=”Circular.easeOut”/>
<mx:Pause duration=”300″/>
<mx:Resize id=”expand2″ heightTo=”450″ duration=”300″ easingFunction=”Circular.easeInOut”/>
</mx:Sequence>

<mx:Sequence effectEnd=”endDiag();” id=”shutdownEffect” target=”{panel}” suspendBackgroundProcessing=”true”>
<mx:Pause duration=”400″/>
<mx:Resize id=”contract2″ heightTo=”1″ duration=”300″ easingFunction=”Circular.easeInOut” suspendBackgroundProcessing=”true”/>
<mx:Pause duration=”300″ suspendBackgroundProcessing=”true”/>
<mx:Resize id=”contract” widthTo=”1″ duration=”300″ suspendBackgroundProcessing=”true” easingFunction=”Circular.easeOut”/>
</mx:Sequence>

<mx:Canvas height=”100%” width=”100%”>

<mx:Panel id=”panel” visible=”false” height=”1″ width=”1″ borderColor=”#000000″ horizontalCenter=”0″ verticalCenter=”0″
title=”Early Years…” themeColor=”#ffffff” autoLayout=”true” titleStyleName=”header”>

<mx:Text id=”info” text=”Sample Text containing the phrase: Hello World! “/>

</mx:Panel>
</mx:Canvas>

</mx:TitleWindow>

Enjoy!