• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
Zadd

Flash Actionscript 3.0 Help! - Pseudo-3D Racing Game

2 posts in this topic

Hello everyone, I do not post here often, but I am a game developer who does have questions.

I was recently hired to make a simple racing game in Flash Professional CS6. 

The plan was to make a pseudo-3D track. I messed with some of the rotation tools etc, however I have not encountered any help on how to manipulate movie clips in 3D space. The picture below shows a doodle car and a 3D track with a cheap background (for now). with a green button as acceleration.

 

My question is, How can I manipulate the movie clip in 3D space?

I would also appreciate any help in telling me the exact math I would need to make the track stay level with the car, and to rotate differently when turning to make the illusion of a 3D environment. Thanks! (I am using an Accelerometer to detect turning of the car)

 

CarExample.PNG

Edited by Zadd
0

Share this post


Link to post
Share on other sites

I think for your game you could probably get away with Flash's built-in "postcard" 3D system. This is the approach I used for a game named FloorPig (look it up on Google Play store if you're interested). It's not true 3D in that it doesn't do any culling, etc., so you will be limited in what you can do, but it's also the path of least resistance and simple to implement.

 

To accomplish FloorPig's functionality, I first created the tile "floor" using XML coordinates to map individual tiles. In your case you can probably make the entire track one movieclip. To rotate it into perspective, simply adjust the rotateY property of the movieclip:

 

currentTrack.rotateY=30;

 

(you'll have to play with the value to get a satisfactory rotation)

 

Rotating the track to match the movement of the car is simply a matter of rotating around the Z axis:

 

currentTrack.rotateZ+=10; //Turn right by 10 degrees

currentTrack.rotateZ-=2; //Turn left by 2 degrees

 

Most likely you will want to add this to a keyboard or mouse event listener so the player can control the movement. Because the keyboard system introduces a delay between first/subsequent keystrokes, you will want to handle keystrokes more directly; something like this:

 

import flash.ui.Keyboard;
import flash.events.Event;
import flash.events.KeyboardEvent;
 
private var _currentKey:uint = 0;
 
private function frameLoop(eventObj:Event):void {
   if (this._currentKey == 0 {
      return;
   }
   if (this._currentKey == Keyboard.LEFT) {
      currentTrack.rotationX -= 5;
   } else if (this._currentKey == Keyboard.RIGHT) {
      currentTrack.rotationX += 5;
   }
}
 
private function keyDownHandler(eventObj:KeyboardEvent):void {
   this._currentKey = eventObj.keyCode;
}
 
private function keyUpHandler(eventObj:KeyboardEvent):void {
   this._currentKey = 0;
}
 
stage.addEventListener(Event.ENTER_FRAME, this.frameLoop);
stage.addEventListener(KeyboardEvent.KEY_DOWN, this.keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, this.keyUpHandler);

 

Note that the rotation values are arbitrary -- you can adjust these based on the turning ability of the car, track conditions, etc. In other words, use variables unlike me :)

 

Now that it's rotated, the track can be placed "beneath" the car using straightforward Flash display depths (setChildIndex, etc.)  Create the track and then just center the car on top. Same for any other elements you want to be visible on top of the track.

 

Moving the car along the track requires you to simply adjust either the X or Y values of the track clip (probably Y but you'll have to test this out). For example:

 

private var _carSpeed:Number=0;
 
private function frameLoop(eventObj:Event):void {
   if (this._carSpeed>0) {
      currentTrack.y+=this._carSpeed;
   }
   if (this._currentKey == 0 {
      return;
   }
   if (this._currentKey == Keyboard.LEFT) {
      currentTrack.rotationX -= 5;
   } else if (this._currentKey == Keyboard.RIGHT) {
      currentTrack.rotationX += 5;
   }
}

 

If you find that moving along the Y axis works well, you can introduce a little X axis motion for things like drifting or sliding (wet track, for example).

 

Finally, you'll want to implement some sort of collision detection. The following is far from the best approach but it worked well enough for FloorPig so it may work for you too. I created 3 (or was it 4?) invisible dots (just movieclips with alpha=0) that sit at the virtual "edges" of the character -- in your case, where the corners of the car should be at the chosen perspective. I adjusted these by hand -- no fancy math. On ever frame loop I check to see if the dots are on top of a tile or not by doing a hit test. For example:

 

private function frameLoop(eventObj:Event):void {
if (currentTrack.hitTestObject(edgePoint1) && 
   currentTrack.hitTestObject(edgePoint2) &&
   currentTrack.hitTestObject(edgePoint3) &&
   currentTrack.hitTestObject(edgePoint4)) {
      //Currently on track
   } else {
      //On ore more wheels is off track
   }
   if (this._currentKey == 0 {
      return;
   }
...
 
This, however, has one major problem - if your track includes both the road and non-road (grass, etc.) in one graphic, the car will always be "on the track" if it's over any part of the clip. To differentiate between different types of terrain, I'd recommend drawing or somehow separating the various elements within your track clip. For example, you could have one movieclip within "currentTrack" that's the road, something like currentTrack.road. Another internal clip would be the grass: currentTrack.grass -- and so on. With this detection in place, you can produce a basic version of what you're looking to do. For example:
 
private function frameLoop(eventObj:Event):void {
   if (currentTrack.road.hitTestObject(edgePoint1) && 
      currentTrack.road.hitTestObject(edgePoint2) &&
      currentTrack.road.hitTestObject(edgePoint3) &&
      currentTrack.road.hitTestObject(edgePoint4)) {
         //Currently on track
      }
   if (currentTrack.grass.hitTestObject(edgePoint1) && 
      currentTrack.grass.hitTestObject(edgePoint2) &&
      currentTrack.grass.hitTestObject(edgePoint3) &&
      currentTrack.grass.hitTestObject(edgePoint4)) {
         //Currently on grass
   }
...

 

Using a similar approach you can place additional objects on top of the track as well as additional "edge points" to detect collisions with them.

 

Since this isn't true 3D, you will most likely be pre-rendering the car (or maybe video capture?) Just be sure to decide on what angle your track will be at up front, otherwise your car will look odd in the context of the scene.

 

 

Good luck

0

Share this post


Link to post
Share on other sites

I just realized that I missed the part about using the Accelerometer, but the concept will be exactly the same. Only difference is that you won't be using Keyboard or Mouse events to capture the user's intentions.

 

I also realized that I used a little more nesting to accomplish this effect...the track itself (with the pieces in it), should nested within one more parent clip to allow you to move the X/Y coordinates...

 

currentTrack.rotateY=30;

currentTrack.container.y+=10;

 

In the above example, currentTrack contains a "container" clip which itself contains the road, grass, etc. clips. When you rotate the parent, all children are also adjusted. However, adjusting the X/Y properties of the "container" will move the track around within the rotated parent, which is what we want.

Edited by Patrick B
0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0