<?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>Jayc Santos &#187; Hardcourt</title>
	<atom:link href="http://jaycsantos.com/category/games/hardcourt/feed/" rel="self" type="application/rss+xml" />
	<link>http://jaycsantos.com</link>
	<description>Games, Development, Blog</description>
	<lastBuildDate>Thu, 10 May 2012 12:15:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Cheating AI from Hardcourt &#8211; Code the Plans</title>
		<link>http://jaycsantos.com/flash/cheating-ai-from-hardcourt-code-the-plans/</link>
		<comments>http://jaycsantos.com/flash/cheating-ai-from-hardcourt-code-the-plans/#comments</comments>
		<pubDate>Fri, 10 Apr 2009 14:09:06 +0000</pubDate>
		<dc:creator>Jayc Santos</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Hardcourt]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://jaycsantos.com/?p=384</guid>
		<description><![CDATA[So I have introduced how to plan out simple AI behavior from my previous post &#8211; Cheating AI from Hardcourt &#8211; Plan it out &#8211; if you haven&#8217;t, read that one first before this. Our next step would be writing the data charts into codes. It might look quite easy when you see the simple [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_465" class="wp-caption alignleft" style="width: 260px"><img class="size-full wp-image-465" title="Plan your behavior" src="http://jaycsantos.com/uploads/2009/04/screen3.jpg" alt="Behavior" width="250" height="130" /><p class="wp-caption-text">Plan your behavior</p></div>
<p>So I have introduced how to plan out simple AI behavior from my previous post &#8211;  <a href="http://jaycsantos.com/games/cheating-ai-from-hardcourt-plan-it-out">Cheating AI from Hardcourt &#8211; Plan it out</a> &#8211; if you haven&#8217;t, read that one first before this.</p>
<p>Our next step would be writing the data charts into codes. It might look quite easy when you see the simple flow charts but remember that the AI must process this through out the game with a character&#8217;s lifespan.</p>
<p>What I&#8217;m about to share is simply a psuedo codish (partly actionscript syntax) of the AI&#8217;s logic. Eventually you can port it into which ever approach you are comfortable with, like OOP or the old school timeline.</p>
<p>Remember that this is my first published game where as I still used AS2 using prototypes and functions but I&#8217;ll discuss this in a little of close objective approach. First of we prepare a few world declarations &amp; preparation in a quick manner.</p>
<p><span id="more-384"></span></p>
<h3>Prepare the world</h3>
<p>In the game world object or whichever the game&#8217;s entities reside, we&#8217;ll be having a <code>calculateDistance</code> method that pre-calculates distances of each of the characters then stores each of their enemies distance on an <code>enemyDist</code> container object.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #009900; font-style: italic;">// from the game world</span>
 <span style="color: #009900; font-style: italic;">// called within the main loop</span>
<span style="color: #339966; font-weight: bold;">function</span> calculateDistances<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
  <span style="color: #009900; font-style: italic;">// pre-calculate distances of:</span>
  <span style="color: #009900; font-style: italic;">//   ball to char - store distance to the character's ballDist variable</span>
  <span style="color: #009900; font-style: italic;">//   char to char - store all other character's (enemy's) distance to character's enemyDist container variable</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>The code below acts as base methods for all characters. This is primarily an advantage from inheritance whereas properties and methods of the base class is inherited by the class that extends it. Basically all the characters will be capable of methods such as moving (<code>moveChar</code>), getting the ball (<code>getBall</code>), shooting it (<code>shoot</code>) and punching their enemies (<code>punch</code>).</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;">  <span style="color: #009900; font-style: italic;">// used to store the ball object also do determine if the we have the ball; set to null if we not</span>
<span style="color: #6699cc; font-weight: bold;">var</span> myBall<span style="color: #000066; font-weight: bold;">:</span>Ball<span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #009900; font-style: italic;">// the distance of the ball from character in Vector2D (x, y)</span>
<span style="color: #6699cc; font-weight: bold;">var</span> ballDist<span style="color: #000066; font-weight: bold;">:</span>Vector2D<span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #009900; font-style: italic;">// contains enemies distances</span>
<span style="color: #6699cc; font-weight: bold;">var</span> enemyDist<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Object</span><span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #009900; font-style: italic;">// assuming that 25 is the range where the character can punch it's enemies</span>
<span style="color: #6699cc; font-weight: bold;">var</span> punchRange<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Number</span> = <span style="color: #000000; font-weight:bold;">25</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
 <span style="color: #009900; font-style: italic;">// moves the character</span>
<span style="color: #339966; font-weight: bold;">function</span> moveChar<span style="color: #000000;">&#40;</span> xdir<span style="color: #000066; font-weight: bold;">,</span> ydir <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
  <span style="color: #009900; font-style: italic;">//  xdir - move left (-1) or right (1)</span>
  <span style="color: #009900; font-style: italic;">//  ydir - move up (-1) or down (1)</span>
<span style="color: #000000;">&#125;</span>
&nbsp;
 <span style="color: #009900; font-style: italic;">// determines if we have the ball else if the ball is close &amp;amp; not owned (by enemy) then get it</span>
<span style="color: #339966; font-weight: bold;">function</span> getBall<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Object</span> <span style="color: #000000;">&#123;</span>
  <span style="color: #009900; font-style: italic;">//  use ballDist for the calculated distance;</span>
  <span style="color: #009900; font-style: italic;">//  returns: ball object - if our char already has it</span>
  <span style="color: #009900; font-style: italic;">// 	      null - if the ball is nowhere near</span>
<span style="color: #000000;">&#125;</span>
&nbsp;
 <span style="color: #009900; font-style: italic;">// shoots the ball</span>
<span style="color: #339966; font-weight: bold;">function</span> shoot<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
  <span style="color: #009900; font-style: italic;">// release the ball towards the ring</span>
  <span style="color: #009900; font-style: italic;">// set myBall to null</span>
<span style="color: #000000;">&#125;</span>
&nbsp;
 <span style="color: #009900; font-style: italic;">// attacks the enemy</span>
 <span style="color: #009900; font-style: italic;">//  params: enemy:Object - the enemy instance to punch</span>
<span style="color: #339966; font-weight: bold;">function</span> punch<span style="color: #000000;">&#40;</span> enemy<span style="color: #000066; font-weight: bold;">:</span>BaseChar <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> <span style="color: #000000;">&#123;</span>
  <span style="color: #009900; font-style: italic;">//  returns: true - if successful hit</span>
  <span style="color: #009900; font-style: italic;">//           false - else not</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>Note: for the <a title="More info about 2D Vector" href="http://google.com/search?q=actionscript+vector+2d" target="_blank">Vector2D</a>, some might be wondering what it is, well it is a class whose purpose is to calculate Vector operations in two dimensions.</p>
<p>Now we have prepared the initial methods, let&#8217;s go with the proposed coding of the flow charts.</p>
<h3>Basic Behaviors</h3>
<p>The AI controlled character behavior:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;">  <span style="color: #009900; font-style: italic;">// runs with the main loop for each AI character</span>
<span style="color: #339966; font-weight: bold;">function</span> thinkAI<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
  <span style="color: #6699cc; font-weight: bold;">var</span> xdir = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #6699cc; font-weight: bold;">var</span> ydir = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
    <span style="color: #009900; font-style: italic;">// if we have the ball</span>
  <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> getBall<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
      <span style="color: #009900; font-style: italic;">// then shoot it!!</span>
    shoot<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
    <span style="color: #009900; font-style: italic;">// if not</span>
  <span style="color: #000000;">&#125;</span><span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #000000;">&#123;</span>
      <span style="color: #009900; font-style: italic;">// get the direction of the ball</span>
    xdir = ballDist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">?</span> ballDist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">/</span> <span style="color: #004993;">Math</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">abs</span><span style="color: #000000;">&#40;</span> ballDist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">:</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
    ydir = ballDist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">?</span> ballDist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">/</span> <span style="color: #004993;">Math</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">abs</span><span style="color: #000000;">&#40;</span> ballDist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">:</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #009900; font-style: italic;">// and move towards it</span>
    moveChar<span style="color: #000000;">&#40;</span> xdir<span style="color: #000066; font-weight: bold;">,</span> ydir <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<div style="overflow:hidden">
<div id="attachment_380" class="wp-caption alignleft" style="width: 160px"><a href="http://jaycsantos.com/uploads/2009/03/ai_chart0.gif"  onclick="return false"><img id="img_384_ai_chart0_gif" class="size-thumbnail wp-image-380" title="Basic Chart - Get &amp;  shoot " src="http://jaycsantos.com/uploads/2009/03/ai_chart0-150x118.gif" alt="Basic Chart - Get &amp; shoot" width="150" height="118"onclick="enlarge(this)" longdesc="http://jaycsantos.com/uploads/2009/03/ai_chart0.gif" /></a><p class="wp-caption-text">Basic Chart - Get &amp; shoot</p></div>
<p>We used the method <code>getBall()</code> to determine if we have the ball or not, if so shoot it. Else, we get the distance from <code>ballDist</code> (which contains the distance in x &amp; y values), have it&#8217;s polarity from it&#8217;s the absolute value and move towards it.</p>
<p>This is only the first chart (Basic Chart), our AI only considers that in the game world there is only the character himself and the ball, so whenever he gets the ball he shoots it immediately and repeats the process.</p></div>
<h3>Expanding for more Interactions</h3>
<p>What we do next is implement the second chart (Interactive Chart) and consider situations with the enemy and interact with it.</p>
<p>So improving the thinkAI() method:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #339966; font-weight: bold;">function</span> thinkAI<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
  <span style="color: #6699cc; font-weight: bold;">var</span> xdir = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #6699cc; font-weight: bold;">var</span> ydir = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
    <span style="color: #009900; font-style: italic;">// if we have the ball</span>
  <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> getBall<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
      <span style="color: #009900; font-style: italic;">// then shoot it!!</span>
    shoot<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
    <span style="color: #009900; font-style: italic;">// if not,</span>
  <span style="color: #000000;">&#125;</span><span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #000000;">&#123;</span>
    <span style="color: #6699cc; font-weight: bold;">var</span> ball = GameWorld<span style="color: #000066; font-weight: bold;">.</span>ball<span style="color: #000066; font-weight: bold;">;</span>
    <span style="color: #6699cc; font-weight: bold;">var</span> dist<span style="color: #000066; font-weight: bold;">:</span>Vector2D<span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #009900; font-style: italic;">// check if another char has the ball, since definitely it isn't this char</span>
    <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> ball<span style="color: #000066; font-weight: bold;">.</span>owner <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
        <span style="color: #009900; font-style: italic;">// store the enemy who has the ball in a local var</span>
      <span style="color: #6699cc; font-weight: bold;">var</span> targetEnemy = enemyDist<span style="color: #000000;">&#91;</span> ball<span style="color: #000066; font-weight: bold;">.</span>owner<span style="color: #000066; font-weight: bold;">.</span>id <span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">;</span>
        <span style="color: #009900; font-style: italic;">// this is the distance of the enemy char with respect to this char</span>
      dist = targetEnemy<span style="color: #000066; font-weight: bold;">.</span>dist<span style="color: #000066; font-weight: bold;">;</span>
        <span style="color: #009900; font-style: italic;">// if this enemy is within punching range</span>
      <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> dist<span style="color: #000066; font-weight: bold;">.</span>len <span style="color: #000066; font-weight: bold;">&lt;</span> punchRange <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
        punch<span style="color: #000000;">&#40;</span> ball<span style="color: #000066; font-weight: bold;">.</span>owner <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
          <span style="color: #009900; font-style: italic;">// no need to do the processes below...</span>
        <span style="color: #0033ff; font-weight: bold;">return</span><span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #000000;">&#125;</span>
    <span style="color: #000000;">&#125;</span> <span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #000000;">&#123;</span>
      dist = ballDist<span style="color: #000066; font-weight: bold;">;</span>
    <span style="color: #000000;">&#125;</span>
      <span style="color: #009900; font-style: italic;">// get the direction</span>
    xdir = dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">?</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">/</span> <span style="color: #004993;">Math</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">abs</span><span style="color: #000000;">&#40;</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">:</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
    ydir = dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">?</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">/</span> <span style="color: #004993;">Math</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">abs</span><span style="color: #000000;">&#40;</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">:</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #009900; font-style: italic;">// and move towards it</span>
    moveChar<span style="color: #000000;">&#40;</span> xdir<span style="color: #000066; font-weight: bold;">,</span> ydir <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<div style="overflow:hidden">
<div id="attachment_381" class="wp-caption alignright" style="width: 160px"><a href="http://jaycsantos.com/uploads/2009/03/ai_chart1.gif"  onclick="return false"><img id="img_384_ai_chart1_gif" class="size-thumbnail wp-image-381" title="Interactive Chart - Steal the ball" src="http://jaycsantos.com/uploads/2009/03/ai_chart1-150x105.gif" alt="Interactive Chart - Steal the ball" width="150" height="105"onclick="enlarge(this)" longdesc="http://jaycsantos.com/uploads/2009/03/ai_chart1.gif" /></a><p class="wp-caption-text">Interactive Chart - Steal the ball</p></div>
<p>After determining that the ball is not in our character&#8217;s possession, we check if the ball is owned by another character. As it is owned, it certainly is not our character who has it as we already tested. So from the <code>enemyDist</code> container object (this has the pre-calculated distances of the character&#8217;s enemies) we get the enemies distance. See if the enemy is within stealing (ok, punching) range and punch if so, else move towards the enemy.</p>
<p>Now we have considered enemies too, if they have possession of the ball, our AI char simply goes after him and if he is within range we steal/punch.</p>
<blockquote><p>Take note that when a character is punched he losses the ball so I also call punching stealing the ball. <img src='http://jaycsantos.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p></blockquote>
</div>
<p>Then we take this into the 2nd chart.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #339966; font-weight: bold;">function</span> thinkAI<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
  <span style="color: #6699cc; font-weight: bold;">var</span> xdir = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #6699cc; font-weight: bold;">var</span> ydir = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
    <span style="color: #009900; font-style: italic;">// if we have the ball</span>
  <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> getBall<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
      <span style="color: #009900; font-style: italic;">// then shoot it!!</span>
    shoot<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #009900; font-style: italic;">// if not,</span>
  <span style="color: #000000;">&#125;</span> <span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #000000;">&#123;</span>
    <span style="color: #6699cc; font-weight: bold;">var</span> ball = GameWorld<span style="color: #000066; font-weight: bold;">.</span>ball<span style="color: #000066; font-weight: bold;">;</span>
    <span style="color: #6699cc; font-weight: bold;">var</span> dist<span style="color: #000066; font-weight: bold;">:</span>Vector2D<span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #009900; font-style: italic;">// check if another char has the ball, since definitely it isn't this char</span>
    <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> ball<span style="color: #000066; font-weight: bold;">.</span>owner <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
        <span style="color: #009900; font-style: italic;">// store the enemy who has the ball in a local var</span>
      <span style="color: #6699cc; font-weight: bold;">var</span> targetEnemy = enemyDist<span style="color: #000000;">&#91;</span> ball<span style="color: #000066; font-weight: bold;">.</span>owner<span style="color: #000066; font-weight: bold;">.</span>id <span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">;</span>
        <span style="color: #009900; font-style: italic;">// targetEnemy.dist is the distance of the enemy char with respect to this char</span>
      dist = targetEnemy<span style="color: #000066; font-weight: bold;">.</span>dist<span style="color: #000066; font-weight: bold;">;</span>
        <span style="color: #009900; font-style: italic;">// if this enemy is within punching range</span>
      <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> dist<span style="color: #000066; font-weight: bold;">.</span>len <span style="color: #000066; font-weight: bold;">&lt;</span> punchRange <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
        punch<span style="color: #000000;">&#40;</span> ball<span style="color: #000066; font-weight: bold;">.</span>owner <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
          <span style="color: #009900; font-style: italic;">// no need to do the processes below...</span>
        <span style="color: #0033ff; font-weight: bold;">return</span><span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #000000;">&#125;</span>
    <span style="color: #000000;">&#125;</span> <span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #000000;">&#123;</span>
        <span style="color: #009900; font-style: italic;">// default the distance from the ball</span>
      <span style="color: #6699cc; font-weight: bold;">var</span> dist = ballDist<span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #6699cc; font-weight: bold;">var</span> ds<span style="color: #000066; font-weight: bold;">;</span>
        <span style="color: #009900; font-style: italic;">// loop through enemies</span>
      <span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span> <span style="color: #004993;">c</span> <span style="color: #0033ff; font-weight: bold;">in</span> enemyDist <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
        ds = enemyDist<span style="color: #000000;">&#91;</span> <span style="color: #004993;">c</span> <span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">.</span>dist<span style="color: #000066; font-weight: bold;">;</span>
          <span style="color: #009900; font-style: italic;">// see if they are closer</span>
        <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> ds<span style="color: #000066; font-weight: bold;">.</span>len <span style="color: #000066; font-weight: bold;">&lt;</span> dist<span style="color: #000066; font-weight: bold;">.</span>len <span style="color: #000000;">&#41;</span>
          dist = ds<span style="color: #000066; font-weight: bold;">;</span>
          <span style="color: #009900; font-style: italic;">// it seems that this enemy is already in range, no need to check the others</span>
        <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> ds<span style="color: #000066; font-weight: bold;">.</span>len <span style="color: #000066; font-weight: bold;">&lt;</span> punchRange <span style="color: #000000;">&#41;</span>
          <span style="color: #0033ff; font-weight: bold;">break</span><span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #000000;">&#125;</span>
        <span style="color: #009900; font-style: italic;">// if this is not the ball distance then it could only be the enemy</span>
      <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> dist <span style="color: #000066; font-weight: bold;">!</span>= ballDist <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
          <span style="color: #009900; font-style: italic;">// if this enemy is within punching range</span>
        <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span> dist<span style="color: #000066; font-weight: bold;">.</span>len <span style="color: #000066; font-weight: bold;">&lt;</span> punchRange <span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
            <span style="color: #009900; font-style: italic;">// attack!!</span>
          punch<span style="color: #000000;">&#40;</span> ball<span style="color: #000066; font-weight: bold;">.</span>owner <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
            <span style="color: #009900; font-style: italic;">// no need to do the processes below...</span>
          <span style="color: #0033ff; font-weight: bold;">return</span><span style="color: #000066; font-weight: bold;">;</span>
        <span style="color: #000000;">&#125;</span>
      <span style="color: #000000;">&#125;</span>
    <span style="color: #000000;">&#125;</span>
      <span style="color: #009900; font-style: italic;">// get the direction</span>
    xdir = dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">?</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">/</span> <span style="color: #004993;">Math</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">abs</span><span style="color: #000000;">&#40;</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">:</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
    ydir = dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">?</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">/</span> <span style="color: #004993;">Math</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">abs</span><span style="color: #000000;">&#40;</span> dist<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">:</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
      <span style="color: #009900; font-style: italic;">// and move towards it</span>
    moveChar<span style="color: #000000;">&#40;</span> xdir<span style="color: #000066; font-weight: bold;">,</span> ydir <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
  <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<div style="overflow:hidden">
<div id="attachment_382" class="wp-caption alignleft" style="width: 160px"><a href="http://jaycsantos.com/uploads/2009/03/ai_chart2.gif"  onclick="return false"><img id="img_384_ai_chart2_gif" class="size-thumbnail wp-image-382" title="Interactive Chart 2 - Go offensive, attack!" src="http://jaycsantos.com/uploads/2009/03/ai_chart2-150x95.gif" alt="Interactive Chart 2 - Go offensive, attack!" width="150" height="95"onclick="enlarge(this)" longdesc="http://jaycsantos.com/uploads/2009/03/ai_chart2.gif" /></a><p class="wp-caption-text">Interactive Chart 2 - Go offensive, attack!</p></div>
<p>What I added here is for our AI character to consider not only the ball itself and it&#8217;s possible owner, but also nearby enemies. Checking through all enemies and determining if they are close enough or within range, therefore stopping them with a punch.</p>
<p>You can also see clearly the advantage of pre-calculating the distances, as  I used the enemy and ball distances enough to avoid recalculating them again and again when needed.</p></div>
<p>Now we have our competitive AI ready! Or not. Feeling like something is missing? Yes, its &#8220;<em>difficulty</em>!&#8221; Basically as you might have suspected that this AI behavior has the perfect reflex (well not so perfect really).  It does what it has to depending on exact situations at the exact time on the next loop.</p>
<blockquote><p><strong>Example this:</strong></p>
<p>Just at the same moment you grab the ball the enemy would instantly steal the ball or, simply saying, you can&#8217;t even run away, your character&#8217;s very change in position and angle is updated and read by the AI at the same time or yet exactly at the next frame therefore it knows where exactly you are same way the moment you move anywhere.</p>
<p>And another problem with the perfect reflex is same way we planned it, the moment the AI character grabs the ball he just shoots it at once.</p></blockquote>
<p>For this problem, a good fix I did was based around with numbers. Yes, &#8220;numbers&#8221; will help with everything, you can imagine setting a level of intelligence for the AI and how much well it executes it&#8217;s task depends on the numbers assigned. But I&#8217;ll leave that to another post to discuss about it more&#8230;</p>
<p>What do you think? <a href="../games/hardcourt/?play">Play hardcourt now!</a> to experience the AI in action.</p>
]]></content:encoded>
			<wfw:commentRss>http://jaycsantos.com/flash/cheating-ai-from-hardcourt-code-the-plans/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cheating AI from Hardcourt &#8211; Plan it out</title>
		<link>http://jaycsantos.com/flash/cheating-ai-from-hardcourt-plan-it-out/</link>
		<comments>http://jaycsantos.com/flash/cheating-ai-from-hardcourt-plan-it-out/#comments</comments>
		<pubDate>Sat, 21 Mar 2009 04:24:01 +0000</pubDate>
		<dc:creator>Jayc Santos</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Hardcourt]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://jaycsantos.com/?p=372</guid>
		<description><![CDATA[Working with AI is a real pain, but I say, it most likely depends on what your game needs, what you want it to do. Most developers who are new would quickly ask the magical word “how?” or “how to start?”. If you haven’t had experience or good experience with AI patterns and behaviors, hear [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_379" class="wp-caption alignleft" style="width: 249px"><a href="http://jaycsantos.com/games/hardcourt/"><img class="size-full wp-image-379" title="Hardcourt" src="http://jaycsantos.com/uploads/2009/03/screen1.jpg" alt="Hardcourt" width="239" height="167" /></a><p class="wp-caption-text">Hardcourt</p></div>
<p>Working with AI is a real pain, but I say, it most likely depends on what your game needs, what you want it to do. Most developers who are new would quickly ask the magical word “how?” or “how to start?”. If you haven’t had experience or good experience with AI patterns and behaviors, hear me out on how I did it with this game.</p>
<p>With my first game, <a href="http://jaycsantos.com/games/hardcourt/">Hardcourt</a>, it was also my first time to encounter programming (<em>or should I say cheating</em>) artificial intelligence (AI). I myself didn’t have proper educational background with AI patterns and behaviors else haven’t even read anything about it when I made that game (I still had dial-up before, so no online tutorials too). With the first build of Hardcourt there were no AI so no playing with CPU, it was just a 2 player on a single PC game. After some time I decided to make it into a much complete game and had been finalized as it is now. I’ve had received good reviews with how the AI performs. It can totally beat the players up (esp with quick play, hard mode).</p>
<p>AI was the most troubling part as I thought; I didn’t even have an idea where to begin with. Now let me share a little knowledge on how I have dealt with this so called “artificial intelligence” and cheated my way through it. This shall be some multi-part discussion on the step by step methods when I dealt with them.</p>
<p><span id="more-372"></span><br />
<strong><span style="color: #ff0000;">Note</span></strong>: Starting here, we reference the character AI (which is the CPU controlled enemies) as our player or the primary character; hence the human player will be referenced as the enemy. So don’t confuse yourselves.</p>
<h3>Charts:</h3>
<p>Flow charts were the first logical programming I had; it can clearly display your problem’s logic through proper data flow. So basically, what I wanted was the AI to do all the same things that a human can and would do (just the common and usual behaviors):</p>
<ol>
<li>go after the ball</li>
<li>shoot</li>
<li>steal the ball</li>
<li>go offensive (attack)</li>
</ol>
<p>… it does look simple, but where do we start?</p>
<h3>Basic Behaviors</h3>
<p>First thing to do is look for actions which least require external forces/object interaction but executes the aim of the game.</p>
<p>These steps are primarily available for those “race to finish” games where the primary aim is achieved without requiring going after opponents. This would be good for certain sports games, racing, who-is-faster, etc games. For hardcourt, since the game is basketball, the primary aim is to shoot into the hoops. So that would include <em>going after the ball</em> and <em>shooting the ball</em>.</p>
<div id="attachment_380" class="wp-caption aligncenter" style="width: 315px"><img class="size-full wp-image-380" title="Basic Chart - Get, move shoot " src="http://jaycsantos.com/uploads/2009/03/ai_chart0.gif" alt="Basic Chart - Get, move shoot" width="305" height="241" /><p class="wp-caption-text">Basic Chart - Get, move shoot</p></div>
<p>To explain the chart through words:</p>
<ol>
<li>See if our character has the ball or not,</li>
<li>if not, get the ball and check again if the ball was acquired (»1)</li>
<li>else if yes, shoot the ball,</li>
<li>then check if the ball was acquired again (»1)</li>
</ol>
<p>It&#8217;s actually a very simple loop but provides the main action required to fulfill the game’s primary purpose. Upon testing this basic behavior, the character shall go after &amp; get the ball, shoot, do get the ball again and repeat the process.</p>
<h3>Expanding for more Interactions</h3>
<p>The next step is to consider the external factors. This is where the character considers the status or actions of another character. It can either be to support allies or to go after enemies depending of certain conditions.</p>
<blockquote><p><em>Case</em>: What if the enemy has possession of the ball? &#8211; Then <em>steal the ball</em>.</p></blockquote>
<div id="attachment_381" class="wp-caption aligncenter" style="width: 384px"><img class="size-full wp-image-381" title="Interactive Chart - Steal the ball" src="http://jaycsantos.com/uploads/2009/03/ai_chart1.gif" alt="Interactive Chart - Steal the ball" width="374" height="263" /><p class="wp-caption-text">Interactive Chart - Steal the ball</p></div>
<p>From this case after knowing that the ball is not in the character’s possession we have to determine where the ball specifically is.</p>
<ol>
<li>So the enemy has the ball:</li>
<li>if so, we have to steal it</li>
<li>else if not, we just go after and get the ball.</li>
<li>Either way we loop again with checking if we have the ball’s possession.</li>
</ol>
<p>So basically we determine the ball’s condition, our character doesn’t just chase it, and he has to steal it if it’s in the enemy&#8217;s possession. In case you’re wondering why we did not consider getting the ball directly after stealing the ball is because there will chances that stealing the ball would simply fail and the enemy still has its possession.</p>
<blockquote><p><em>Case</em>: The enemy doesn’t have the ball and we don’t want the enemy to get a hold of it. &#8211; <em>go offensive, attack!</em></p></blockquote>
<p>On this next expansion, we decide to make our character more aggressive and attempt to stop the enemy to from gaining the ball.</p>
<div id="attachment_382" class="wp-caption aligncenter" style="width: 487px"><img class="size-full wp-image-382" title="Interactive Chart 2 - Go offensive, attack!" src="http://jaycsantos.com/uploads/2009/03/ai_chart2.gif" alt="Interactive Chart 2 - Go offensive, attack!" width="477" height="303" /><p class="wp-caption-text">Interactive Chart 2 - Go offensive, attack!</p></div>
<p>Now we made it clearer that for stealing the ball we attack the enemy. For this, before going after the ball, we determine if the enemy is closer than the ball is.</p>
<ol>
<li>Check if enemy is closer than the ball,</li>
<li>if so, attack him</li>
<li>else if not, we go after ball first.</li>
<li>Either way we loop again with checking if we have the ball’s possession.</li>
</ol>
<p>With this chart expansion, our AI now considers the enemy position compared to the ball’s position and determines which action to do. It might not be the wisest decision making but it would comprehend that fact that the enemy is offensive in a way.</p>
<p>Now our AI behavior chart is complete enough to be competitive… or at the least it does what it has to. We can even add some more like evading the enemy when taking a shot, even simply evading enemy attacks or other more complex actions/reactions from various events and circumstances. But with hardcourt, this is all that I would have needed. Although if you’ll consider more decision making for your AI with more specific situations, you’ll be making a better AI and might even be more intelligent than the human.</p>
<p>You want to see these behaviors in action? &#8211; analyze and see for yourself: <a href="../games/hardcourt/?play">play hardcourt now</a>!</p>
]]></content:encoded>
			<wfw:commentRss>http://jaycsantos.com/flash/cheating-ai-from-hardcourt-plan-it-out/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

