Thursday, August 12, 2010

How to create a simple trading system - part 2

Today we continue working on our fallout-like trading system. We add prices for our items and an arrow, which shows how much money does a person have to pay.

The system is supposed to have money, so let's add them through data paremeter when we are adding our items for the first time. In this example, I also write the price in label, to show the price to the user.

list1.addItem({label:"Apple ($3)", data:3});
list1.addItem({label:"Pear ($2)", data:2});
list1.addItem({label:"Pineapple ($3)", data:3});
list1.addItem({label:"Orange ($2)", data:2});
list1.addItem({label:"Lemon ($3)", data:3});

list2.addItem({label:"Grapes ($1)", data:1});
list2.addItem({label:"Pumpkin ($4)", data:4});
list2.addItem({label:"Cherry ($1)", data:1});
list2.addItem({label:"Peach ($2)", data:2});
list2.addItem({label:"Tomato ($1)", data:1});

Look at those ridiculous prices!.. Anyway, now that we know how much everything costs, we can move on. The system makes it simple for the user, because it only shows how much money does one have to pay to another for the goods, even if they trade items.

For example, if player gives an orange for 2 dollars and takes a peach for 2 dollars, he doesn't need to pay extra, and nor does the merchant. But if the player gives a pear for 2 dollars and takes a pumpkin for 4 dollars, he will need to pay 2 more dollars for the deal to be even.

Here's what we are going to make:



As you can see, if the deal is uneven, an arrow appears, showing how much money do you or does merchant have to pay.

Now let's create this!

First of all draw an arrow (it has to face right) between your lists. Give the movieclip an instance name of "mc_arrow". Then make a textfield and put it there too (not in the arrow movieclip, but on the stage) and give it an instance of "payment".

What we need to do now is to create a new variable "pay" that will hold the money transfer data. Also make sure that arrow is transparent on init.

var pay:int = 0;
mc_arrow.alpha=0

If pay is a positive number, then user has to pay. If it is negative - merchant needs to pay.

In the giveItem and takeItem functions, add lines that add money values to 'pay' variable when an item is relocated. Also call a function called checkpayment, which we will create later.

list1.addEventListener(Event.CHANGE, giveItem);
function giveItem(event:Event)
{
 pay +=  event.target.selectedItem.data;
 list2.addItem(event.target.selectedItem);
 list1.removeItem(event.target.selectedItem);
 checkpayment();
}

list2.addEventListener(Event.CHANGE, takeItem);
function takeItem(event:Event)
{
 pay -=  event.target.selectedItem.data;
 list1.addItem(event.target.selectedItem);
 list2.removeItem(event.target.selectedItem);
 checkpayment();
}

Now create a new function checkpayment(). We will call it every time an item's position is changed.

function checkpayment()
{
 if (pay != 0)
 {
  mc_arrow.alpha = 1;
  if (pay > 0)
  {
   mc_arrow.scaleX = -1;
   payment.text = "$" + pay.toString();
  }
  if (pay < 0)
  {
   mc_arrow.scaleX = 1;
   payment.text = "$" + Math.abs(pay).toString();
  }
 }
 else
 {
  mc_arrow.alpha = 0;
  payment.text=""
 }
}
Describing the code: If pay is not zero - make it visible, if equals zero - make it invisible and the text equals nothing (""). If pay is more than 0, turn arrow left and display ammount of cash in the text field. If pay is less than 0, turn arrow right and display cash in the text field. We use Math.abs because the value of 'pay' at that time is negative, but we want it to be without '-'. We could also just multiply it by -1. Both ways work. So here's the full code:
list1.addItem({label:"Apple ($3)", data:3});
list1.addItem({label:"Pear ($2)", data:2});
list1.addItem({label:"Pineapple ($3)", data:3});
list1.addItem({label:"Orange ($2)", data:2});
list1.addItem({label:"Lemon ($3)", data:3});

list2.addItem({label:"Grapes ($1)", data:1});
list2.addItem({label:"Pumpkin ($4)", data:4});
list2.addItem({label:"Cherry ($1)", data:1});
list2.addItem({label:"Peach ($2)", data:2});
list2.addItem({label:"Tomato ($1)", data:1});

list1.addEventListener(Event.CHANGE, giveItem);
function giveItem(event:Event)
{
 pay +=  event.target.selectedItem.data;
 list2.addItem(event.target.selectedItem);
 list1.removeItem(event.target.selectedItem);
 checkpayment();
}

list2.addEventListener(Event.CHANGE, takeItem);
function takeItem(event:Event)
{
 pay -=  event.target.selectedItem.data;
 list1.addItem(event.target.selectedItem);
 list2.removeItem(event.target.selectedItem);
 checkpayment();
}

var pay:int = 0;
mc_arrow.alpha=0

function checkpayment()
{
 if (pay != 0)
 {
  mc_arrow.alpha = 1;
  if (pay > 0)
  {
   mc_arrow.scaleX = -1;
   payment.text = "$" + pay.toString();
  }
  if (pay < 0)
  {
   mc_arrow.scaleX = 1;
   payment.text = "$" + Math.abs(pay).toString();
  }
 }
 else
 {
  mc_arrow.alpha = 0;
  payment.text=""
 }
}
Thanks for reading!

Related:

How to create a simple trading system: Part 1

No comments:

Post a Comment