How to build a game engine agnostic third person camera implementation

Game engine agnostic third person camera implementation | Radcade Game engine agnostic third person camera implementation Totally Rad web games! and indie game content! MenuBlogArcadeMultiplayerActionStrategy Subway Surf 2 Action Panzerkrieg Simulator Action Armed With Wings Adventure Gun Mayhem Redux Action Armour Crush Puzzles Offroad Racing 2D Driving Battle of Orcs Action Skate Hooligans Action Table Tug Online Multiplayer News Table Tug OnlineTry to tug the table and bring your opponent across the line. Play local two player mode or challenge players online from around the world.Spacebar or tap to tug... Subway Clash 3DYou fight in an underground area of Moscow metro full of angry KGB soldiers trying to bring you down. Pick up various weapons to defend yourself and lead to the top of rank table!WASD - movement... Subway Surf 2Subway Surf 2 is an endless runner game. As the hooligans run, they grab gold coins out of the air while simultaneously dodging collisions with railway cars.Controls Mouse Arrows... Panzerkrieg SimulatorYo dude, you into tanks and wanna rack up some serious points by taking down some enemies? Look no further, this here simulator is perfect for gettin' ya take action on. Pick your fave weapon and blas... Armed With WingsArmed With Wings is a sword-fighting action game with a platformer element.Tap To Play ... Gun Mayhem ReduxGun Mayhem is finally back, after the smash hit Gun Mayhem 2. After a long break, you can now battle your friends or the AI in the epic Gun Mayhem Redux. There are 21 unique weapons with 2 fire modes ... Armour CrushArmour Crush is a strategy tank deployment game. Objective is to destroy the opponent base by deploying the tanks. Deploy at least 3 tanks to advance towards enemy base. Selecting the right tanks at a... Offroad Racing 2DOffroad Racing 2D is a fun racing game with multiple cars and levels.Use arrows to play... Battle of OrcsBattle of Orcs is real time strategy units deployment game. Objective is to destroy the opponent base by deploying the orcs. Try different combination of units to make effective attack force. Selectin... Skate HooligansCowabunga! Little hooligans are on the way! Choose your hero and arrange an amazing disorder ^_^ Collect coins, upgrade bonuses, buy cool skateboards, avoid dangerous obstacles and get scores as much ... Table Tug OnlineTry to tug the table and bring your opponent across the line. Play local two player mode or challenge players online from around the world.Spacebar or tap to tug... Subway Clash 3DYou fight in an underground area of Moscow metro full of angry KGB soldiers trying to bring you down. Pick up various weapons to defend yourself and lead to the top of rank table!WASD - movement... Home/Blog/Game engine agnostic third person camera implementation Game engine agnostic third person camera implementation BlogKev Zettler10 Apr, 2023 I recently migrated to a new game engine from a custom game engine. I needed to implement a third person character controller. This is something I did previously in the custom engine but forgot how. It took me a few days to relearn. I eventually reverse enginered my previous camera system. Finding resources online was suprisingly challenging. The style of camera I wanted is an "over the shoulder". Lots of the resources I found on how to implement were missing details on vertical axis rotation The implementation I settled on is odd and more of an 'arc ball' implementation that follows a player. The camera has an invisible 'view sphere' with a camera eye on one point of the spehere and a lookat target on the other. This implementation is also agnostic to input devices. The player can use mouse+keyboard, a touch screen, or gamepad. This implementation assumes the player has a directional input for movement like WASD keys or Dpad. It is also assumed the player has another input for camera control like a mouse, analog stick, or touch screen. For the sake of consistency we will assume keyboard and mouse inputs. Crude sketch of the entire system The following implementation uses some fake pseudocode to demonstarte the math mechanics. Mainly it demonstrates the required values and their relative mutations. I am documenting the implementation in this post so I will remember how to do it in the future. Start with the front vector. Setup a basic scene with a character mesh and a perspective camera. The character mesh and camera should face the world front vector this vector depends on the coordinate system of your game engine. The coordinate system of the latest engine I'm using is a Z up axis and the X axis is forward. This is similiar to the Unreal engines coordinate system. Previously I was working in a Y up and Z forward coordinate system. Freya Holmér has produced helpful chart on which tools use which coordinate systems It really dosen't matter what world vector you use as long as the camera and character default to facing the same vector and you consistenly use it for all view calculations. Set a default offset for the view sphere Next you want to create an offset vector that is the "view sphere offset". This is the vector that will translate the camera to a position over the shoulder of the player. This offset should be relative to the players position. You could update this vector on each frame as the player moves or you could make it a child entity of the player entity so it is calculated by the engine entity transform heiarchy. In our implementation we will manually be updating it each frametick. Set the default camera and target positions Next you will set the initial values for the camera eye and camera lookat positions. These vectors will be relative to the view sphere offset vector. They will be on opposite sides of the view sphere sphere. They extend forward and back from the view sphere center. camera_lookat_position = view_sphere_offset + world_front * view_sphere_radius; camera_eye_position = view_sphere_offset - world_front * view_sphere_radius; The difference between the two is the addition and minus operations to the camera offset. The addition operation of the camera_target_position moves the camera positively to the front and the minus operation moves the camera_eye_position to the back. At this point we have all the components for a static over the shoulder view of our player mesh. Next we will add code to to handle player input. Default position of player and camera The player rotation quaternion The first player input we want to address is horizontal axis rotation. The horizontal axis rotation will effect all our other movement calculations. We will need a quaternion to handle horizontal rotation. When the mouse moves on the X axis we rotate the horizontal quaternion on the around the vertical axis. this looks like: horizontal_rotation_quat *= new_quaternion_from_rotation_z(delta_mouse_position_x * mouse_sensitivity) This code assumes the quaternion implementation you're using has from_rotation methods that take a euler angle and create a new quaternion from that angle. Each gameplay frame we will use the horizontal_rotation_quat to update the players rotation and heading, we will apply the rotation value in the next section. Horizontal rotation. orb is center point of the view sphere Handling player movement input Now that we have our heading for the players horizontal direction it makes sense to tackle the WASD input We need a few new variables to capture this: player_forward_vector - The vector the player is facing and and headed towards player_right_vector - The vector to the players right that they can strafe towards player_direction - a vector combining the players forward and right vectors indicating their heading player_speed - a scaler value represening movement speed player_forward_vector = horizontal_rotation_quat * world_front_vec; player_right_vector = horizontal_rotation_quat * world_right; player_direction = [0,0,0] // empty vector With those heading vectors in place we can handle the WASD inputs. Assuming we have a keydown input handler: if(keydown == W) player_direction += player_forward if(keydown == S) player_direction -= player_forward if(keydown == A) player_direction -= player_right if(keydown == D) player_direction += player_right finally we can update the players position based on the direction and speed player_position = player_direction * speed; This code will update the player mesh. We also need to apply the horizontal_rotation_quat to the camera view and target offests camera_rotation_quat = horizontal_rotation_quat camera_front_vector = camera_rotation_quat * world_front; view_sphere_offset = world_up_vector * up_offset + player_right_vector * right_offset; target_distance_from_player = camera_front * distance; camera_distance_from_player = -camera_front * distance; camera_target_position = player_position + view_sphere_offset + target_distance_from_player; camera_eye_position = player_position + view_sphere_offset + Now we have the basics of a third person camera. The player can move and rotate on the horizontal axis and the camera will rotate with the player. Keyboard movement enabled Vertical rotation and aim Next let us handle vertical rotation. This is where I've seen gaps in many third person camera learning resources. To capture vertical aim we will create another quaternion similiar to the horizontal_rotation_quat. The new quaternion will be called vertical_rotation_quat and we will update it from the mouse Y axis movement deltas. vertical_rotation_quat *= new_quaternion_from_rotation_y(delta_mouse_position_y * mouse_sensitivity) combine vertical and horizontal quaternions Now that we are capturing horizontal and vertical rotation input we will combine them in to a new quaternion we'll for the overal camera translation camera_rotation_quat = horizontal_rotation_quat * vertical_rotation_quat; The camera_rotation_quat is used to determine what is the cameras front direction: camera_front = camera_rotation_quat * world_front given the cameras front vector we can project vectors forward and back from the view_sphere_center to give us the position of the lookat and eye. We then have all the data we need to set the final lookat and eye position. This captures all expected user input: WASD movement, Mouse vertical and horizontal look movement. Keyboard movement enabled, vertical, horizontal rotation Game engine agnostic third person camera controller peusdocode The following is a peusdocode implementation of the mechanics discussed above. It contains a for_each_frame do: section which is synonymous to a update handler in any game engine. world_front = X_axis world_right = Y_axis world_up = Z_axis player_position = [0,0,0] player_front = world_front player_speed = 5; view_sphere_up_offset = 7; view_sphere_right_offset = 2; view_sphere_radius = 7 view_sphere_offset = player_position + world_up * view_sphere_up_offset + world_right * view_sphere_right_offset; camera_lookat_position = view_sphere_offset + world_front * view_sphere_radius; camera_eye_position = view_sphere_offset - world_front * view_sphere_radius; camera_front = world_front horizontal_rotation_quat = [0,0,0,0] vertical_rotation_quat = [0,0,0,0] mouse_sensitivity = 5; for_each_frame do: // update rotation quaternions with mouse delta changes horizontal_rotation_quat *= new_quat_from_z_rotation_angle(mouse_delta_x * mouse_sensitivity) vertical_rotation_quat *= new_quaternion_from_rotation_y(delta_mouse_position_y * mouse_sensitivity) // update player forward and right vectors with new rotation player_forward = horizontal_rotation_quat * world_front; player_right = horizontal_rotation_quat * world_right; // set player direction based on WASD keyboard input player_direction = [0,0,0] // empty vector if(keydown == W) player_direction += player_forward if(keydown == S) player_direction -= player_forward if(keydown == A) player_direction -= player_right if(keydown == D) player_direction += player_right // update player position with new direction and speed player_position += player_direction * player_speed; //update view_sphere_offset to the new player_right vector view_sphere_offset = world_up * view_sphere_up_offset + player_right * view_sphere_right_offset; // create a camera rotation quat from the horizontal and vertical rotations camera_rotation_quat = horizontal_rotation_quat * vertical_rotation_quat; // create a camera front vector that applies the camera rotation to the world front camera_front = camera_rotation_quat * world_front // project the eye and offset out from the view sphere center by a radius // lookat is positive so its in front of player // eye is negative so it is behind player camera_lookat_offset = camera_front + view_sphere_radius camera_eye_offset = camera_front - view_sphere_radius // finally calculate the camera look at and eye positions camera_lookat_position = player_position + view_sphere_offset + camera_lookout_offset; camera_eye_position = player_position + view_sphere_offset + camera_eye_offset; Additional third person camera features This is a fairly functional third person camera implmentation but there are extra cirricular features to ad clamp the vertical rotations The current implementation has no limit on the vertical rotation. This is a problem because the camera can easily flip over or under the player mesh. To alleviate this we would create a variable that represents the vertical euler angle rotation like camera_pitch. This pitch variable would be updated each frame with the mouse coordinates like we do with the vertical_rotation_quaternion the camera_pitch would then be clamped at max min values to prevent the flipping. The vertical_rotation_quaternion would then be generated from the pitch angle using the same new_quaternion_from_rotation_y helper function. decouple the horizontal rotations In this current implementation the player and camera horizontal rotations are coupled and use the same horizontal_rotation_quat This coupling enforces that the player and camera are always facing the same direction. We could give the player and camera seperate horizontal rotation quaternions which would enable the camera to freely rotate the view sphere space while the player mesh could look in other directions. This camera experience is similiar to what you seein in AAA thrid person camera games like From Software titles. Summary This camera system is my niave implementation that came togeter after random hacking. I could not get a pitch, yaw, polar coordinate implementation working. Let me know in the comments if there are more correct ways to implement this type of camera system or any improvements. If you liked this content follow us on Twitter for more! Comments: Categories UncategorizedActionAdventureArcadeBoard GameDrivingFightingMultiplayerOtherPuzzlesShootingStrategy Instantly play your favorite free online games Play unlimited free games at RadCade.com is the best place to go if you’re searching for a variety of popular games Policies Privacy PolicyTerms and ConditionsDisclaimer Recent Games Subway Clash 3D Shooting Subway Surf 2 Action Panzerkrieg Simulator Action Armed With Wings Adventure TermsPrivacy PolicyTerms and ConditionsDisclaimer ContactRadCadeemail admin at radcade.com RadCade is a Red Trench Media Corp Property{"props":{"pageProps":{"data":{"postBy":{"title":"Game engine agnostic third person camera implementation","author_name":"Kev Zettler","author_pic":"https://twitter.com/kevzettler/photo","author_link":"https://twitter.com/kevzettler","featured_image_url":"/assets/blog/engine-agnostic-camera/sketch_overview.png","description":"How to implement a third person 'over the shoulder' camera from scratch. These are engine agnostic mathematical mechanisms and logic","date":"2023-04-11","contentHTML":"\u003cp\u003eI recently migrated to a new game engine from a custom game engine. I needed to implement a third person character controller. This is something I did previously in the custom engine but forgot how. It took me a few days to relearn. I eventually reverse enginered my previous camera system. Finding resources online was suprisingly challenging. The style of camera I wanted is an \u0026quot;over the shoulder\u0026quot;. Lots of the resources I found on how to implement were missing details on vertical axis rotation The implementation I settled on is odd and more of an \u0026#39;arc ball\u0026#39; implementation that follows a player. The camera has an invisible \u0026#39;view sphere\u0026#39; with a camera eye on one point of the spehere and a lookat target on the other.\u003c/p\u003e\n\u003cp\u003eThis implementation is also agnostic to input devices. The player can use mouse+keyboard, a touch screen, or gamepad. This implementation assumes the player has a directional input for movement like WASD keys or Dpad. It is also assumed the player has another input for camera control like a mouse, analog stick, or touch screen. For the sake of consistency we will assume keyboard and mouse inputs.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/sketch_overview.png\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/sketch_overview.png\" alt=\"sketch of a game engine agnostic third person camera controler\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eCrude sketch of the entire system\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\n\n\u003cp\u003eThe following implementation uses some fake pseudocode to demonstarte the math mechanics. Mainly it demonstrates the required values and their relative mutations. I am documenting the implementation in this post so I will remember how to do it in the future.\u003c/p\u003e\n\u003ch2 id=\"start-with-the-front-vector\"\u003eStart with the front vector.\u003c/h2\u003e\n\u003cp\u003eSetup a basic scene with a character mesh and a perspective camera. The character mesh and camera should face the world front vector this vector depends on the coordinate system of your game engine. The coordinate system of the latest engine I\u0026#39;m using is a Z up axis and the X axis is forward. This is similiar to the Unreal engines coordinate system. Previously I was working in a Y up and Z forward coordinate system. \u003ca href=\"https://twitter.com/freyaholmer/status/1325556229410861056\"\u003eFreya Holmér has produced helpful chart on which tools use which coordinate systems\u003c/a\u003e It really dosen\u0026#39;t matter what world vector you use as long as the camera and character default to facing the same vector and you consistenly use it for all view calculations.\u003c/p\u003e\n\u003ch2 id=\"set-a-default-offset-for-the-view-sphere\"\u003eSet a default offset for the view sphere\u003c/h2\u003e\n\u003cp\u003eNext you want to create an offset vector that is the \u003cstrong\u003e\u0026quot;view sphere offset\u0026quot;\u003c/strong\u003e. This is the vector that will translate the camera to a position over the shoulder of the player. This offset should be relative to the players position. You could update this vector on each frame as the player moves or you could make it a child entity of the player entity so it is calculated by the engine entity transform heiarchy. In our implementation we will manually be updating it each frametick.\u003c/p\u003e\n\u003ch2 id=\"set-the-default-camera-and-target-positions\"\u003eSet the default camera and target positions\u003c/h2\u003e\n\u003cp\u003eNext you will set the initial values for the camera \u003cstrong\u003eeye\u003c/strong\u003e and camera \u003cstrong\u003elookat\u003c/strong\u003e positions. These vectors will be relative to the view sphere offset vector. They will be on opposite sides of the view sphere sphere. They extend forward and back from the view sphere center.\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ecamera_lookat_position = view_sphere_offset + world_front * view_sphere_radius;\ncamera_eye_position = view_sphere_offset - world_front * view_sphere_radius;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe difference between the two is the addition and minus operations to the camera offset. The addition operation of the \u003ccode\u003ecamera_target_position\u003c/code\u003e moves the camera positively to the front and the minus operation moves the \u003ccode\u003ecamera_eye_position\u003c/code\u003e to the back.\u003c/p\u003e\n\u003cp\u003eAt this point we have all the components for a static over the shoulder view of our player mesh. Next we will add code to to handle player input.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/default_view.png\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/default_view.png\" alt=\"default view of engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eDefault position of player and camera\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003ch2 id=\"the-player-rotation-quaternion\"\u003eThe player rotation quaternion\u003c/h2\u003e\n\u003cp\u003eThe first player input we want to address is horizontal axis rotation. The horizontal axis rotation will effect all our other movement calculations. We will need a quaternion to handle horizontal rotation. When the mouse moves on the X axis we rotate the horizontal quaternion on the around the vertical axis. this looks like:\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ehorizontal_rotation_quat *= new_quaternion_from_rotation_z(delta_mouse_position_x * mouse_sensitivity)\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis code assumes the quaternion implementation you\u0026#39;re using has \u003ccode\u003efrom_rotation\u003c/code\u003e methods that take a euler angle and create a new quaternion from that angle.\nEach gameplay frame we will use the \u003ccode\u003ehorizontal_rotation_quat\u003c/code\u003e to update the players rotation and heading, we will apply the rotation value in the next section.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/horizontal_rotation.gif\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/horizontal_rotation.gif\" alt=\"horizontal rotation in game engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eHorizontal rotation. orb is center point of the view sphere\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\n\n\u003ch2 id=\"handling-player-movement-input\"\u003eHandling player movement input\u003c/h2\u003e\n\u003cp\u003eNow that we have our heading for the players horizontal direction it makes sense to tackle the WASD input We need a few new variables to capture this:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eplayer_forward_vector - The vector the player is facing and and headed towards\u003c/li\u003e\n\u003cli\u003eplayer_right_vector - The vector to the players right that they can strafe towards\u003c/li\u003e\n\u003cli\u003eplayer_direction - a vector combining the players forward and right vectors indicating their heading\u003c/li\u003e\n\u003cli\u003eplayer_speed - a scaler value represening movement speed\u003c/li\u003e\n\u003c/ul\u003e\n\u003cpre\u003e\u003ccode\u003eplayer_forward_vector = horizontal_rotation_quat * world_front_vec;\nplayer_right_vector = horizontal_rotation_quat * world_right;\nplayer_direction = [0,0,0] // empty vector\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eWith those heading vectors in place we can handle the WASD inputs. Assuming we have a keydown input handler:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eif(keydown == W) player_direction += player_forward\nif(keydown == S) player_direction -= player_forward\nif(keydown == A) player_direction -= player_right\nif(keydown == D) player_direction += player_right\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003efinally we can update the players position based on the direction and speed\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003eplayer_position = player_direction * speed;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis code will update the player mesh. We also need to apply the \u003ccode\u003ehorizontal_rotation_quat\u003c/code\u003e to the camera view and target offests\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ecamera_rotation_quat = horizontal_rotation_quat\ncamera_front_vector = camera_rotation_quat * world_front;\nview_sphere_offset = world_up_vector * up_offset + player_right_vector * right_offset;\n\ntarget_distance_from_player = camera_front * distance;\ncamera_distance_from_player = -camera_front * distance;\ncamera_target_position = player_position + view_sphere_offset + target_distance_from_player;\n\ncamera_eye_position = player_position + view_sphere_offset +\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eNow we have the basics of a third person camera. The player can move and rotate on the horizontal axis and the camera will rotate with the player.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/movement.gif\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/movement.gif\" alt=\"movement and horizontal rotation in game engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eKeyboard movement enabled\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003ch2 id=\"vertical-rotation-and-aim\"\u003eVertical rotation and aim\u003c/h2\u003e\n\u003cp\u003eNext let us handle vertical rotation. This is where I\u0026#39;ve seen gaps in many third person camera learning resources. To capture vertical aim we will create another quaternion similiar to the horizontal_rotation_quat. The new quaternion will be called \u003ccode\u003evertical_rotation_quat\u003c/code\u003e and we will update it from the mouse Y axis movement deltas.\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003evertical_rotation_quat *= new_quaternion_from_rotation_y(delta_mouse_position_y * mouse_sensitivity)\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"combine-vertical-and-horizontal-quaternions\"\u003ecombine vertical and horizontal quaternions\u003c/h3\u003e\n\u003cp\u003eNow that we are capturing horizontal and vertical rotation input we will combine them in to a new quaternion we\u0026#39;ll for the overal camera translation\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ecamera_rotation_quat = horizontal_rotation_quat * vertical_rotation_quat;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe \u003ccode\u003ecamera_rotation_quat\u003c/code\u003e is used to determine what is the cameras front direction:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003ecamera_front = camera_rotation_quat * world_front\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003egiven the cameras front vector we can project vectors forward and back from the view_sphere_center to give us the position of the lookat and eye. We then have all the data we need to set the final \u003ccode\u003elookat\u003c/code\u003e and \u003ccode\u003eeye\u003c/code\u003e position. This captures all expected user input: WASD movement, Mouse vertical and horizontal look movement.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/allaxis.gif\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/allaxis.gif\" alt=\"movement and vertical rotation in game engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eKeyboard movement enabled, vertical, horizontal rotation\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\n\u003ch2 id=\"game-engine-agnostic-third-person-camera-controller-peusdocode\"\u003eGame engine agnostic third person camera controller peusdocode\u003c/h2\u003e\n\u003cp\u003eThe following is a peusdocode implementation of the mechanics discussed above. It contains a \u003ccode\u003efor_each_frame do:\u003c/code\u003e section which is synonymous to a update handler in any game engine.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eworld_front = X_axis\nworld_right = Y_axis\nworld_up = Z_axis\n\nplayer_position = [0,0,0]\nplayer_front = world_front\nplayer_speed = 5;\n\nview_sphere_up_offset = 7;\nview_sphere_right_offset = 2;\nview_sphere_radius = 7\nview_sphere_offset = player_position + world_up * view_sphere_up_offset + world_right * view_sphere_right_offset;\ncamera_lookat_position = view_sphere_offset + world_front * view_sphere_radius;\ncamera_eye_position = view_sphere_offset - world_front * view_sphere_radius;\ncamera_front = world_front\n\nhorizontal_rotation_quat = [0,0,0,0]\nvertical_rotation_quat = [0,0,0,0]\n\nmouse_sensitivity = 5;\n\nfor_each_frame do:\n // update rotation quaternions with mouse delta changes\n horizontal_rotation_quat *= new_quat_from_z_rotation_angle(mouse_delta_x * mouse_sensitivity)\n vertical_rotation_quat *= new_quaternion_from_rotation_y(delta_mouse_position_y * mouse_sensitivity)\n\n // update player forward and right vectors with new rotation\n player_forward = horizontal_rotation_quat * world_front;\n player_right = horizontal_rotation_quat * world_right;\n\n // set player direction based on WASD keyboard input\n player_direction = [0,0,0] // empty vector\n if(keydown == W) player_direction += player_forward\n if(keydown == S) player_direction -= player_forward\n if(keydown == A) player_direction -= player_right\n if(keydown == D) player_direction += player_right\n\n // update player position with new direction and speed\n player_position += player_direction * player_speed;\n\n //update view_sphere_offset to the new player_right vector\n view_sphere_offset = world_up * view_sphere_up_offset + player_right * view_sphere_right_offset;\n\n // create a camera rotation quat from the horizontal and vertical rotations\n camera_rotation_quat = horizontal_rotation_quat * vertical_rotation_quat;\n\n // create a camera front vector that applies the camera rotation to the world front\n camera_front = camera_rotation_quat * world_front\n\n // project the eye and offset out from the view sphere center by a radius\n // lookat is positive so its in front of player\n // eye is negative so it is behind player\n camera_lookat_offset = camera_front + view_sphere_radius\n camera_eye_offset = camera_front - view_sphere_radius\n\n // finally calculate the camera look at and eye positions\n camera_lookat_position = player_position + view_sphere_offset + camera_lookout_offset;\n camera_eye_position = player_position + view_sphere_offset + camera_eye_offset;\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"additional-third-person-camera-features\"\u003eAdditional third person camera features\u003c/h2\u003e\n\u003cp\u003eThis is a fairly functional third person camera implmentation but there are extra cirricular features to ad\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eclamp the vertical rotations\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eThe current implementation has no limit on the vertical rotation. This is a problem because the camera can easily flip over or under the player mesh. To alleviate this we would create a variable that represents the vertical euler angle rotation like \u003ccode\u003ecamera_pitch\u003c/code\u003e. This pitch variable would be updated each frame with the mouse coordinates like we do with the \u003ccode\u003evertical_rotation_quaternion\u003c/code\u003e the \u003ccode\u003ecamera_pitch\u003c/code\u003e would then be clamped at max min values to prevent the flipping. The \u003ccode\u003evertical_rotation_quaternion\u003c/code\u003e would then be generated from the pitch angle using the same \u003ccode\u003enew_quaternion_from_rotation_y\u003c/code\u003e helper function.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003edecouple the horizontal rotations\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eIn this current implementation the player and camera horizontal rotations are coupled and use the same \u003ccode\u003ehorizontal_rotation_quat\u003c/code\u003e This coupling enforces that the player and camera are always facing the same direction. We could give the player and camera seperate horizontal rotation quaternions which would enable the camera to freely rotate the view sphere space while the player mesh could look in other directions. This camera experience is similiar to what you seein in AAA thrid person camera games like From Software titles.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"summary\"\u003eSummary\u003c/h2\u003e\n\u003cp\u003eThis camera system is my niave implementation that came togeter after random hacking. I could not get a pitch, yaw, polar coordinate implementation working. Let me know in the comments if there are more correct ways to implement this type of camera system or any improvements.\u003c/p\u003e\n","excerpt":"I recently migrated to a new game engine from a custom game engine. I needed to implement a third person character controller. This is something I did previously in the custom engine but forgot how. It took me a few days to relearn. I eventually reverse enginered my previous camera system. Finding resources online was suprisingly challenging. The style of camera I wanted is an \"over the sh...","slug":"/game-engine-agnostic-third-person-camera","meta":{"description":"How to implement a third person 'over the shoulder' camera from scratch. These are engine agnostic mathematical mechanisms and logic"},"post_date":"2023-04-11","uri":"/game-engine-agnostic-third-person-camera","post_content":"\u003cp\u003eI recently migrated to a new game engine from a custom game engine. I needed to implement a third person character controller. This is something I did previously in the custom engine but forgot how. It took me a few days to relearn. I eventually reverse enginered my previous camera system. Finding resources online was suprisingly challenging. The style of camera I wanted is an \u0026quot;over the shoulder\u0026quot;. Lots of the resources I found on how to implement were missing details on vertical axis rotation The implementation I settled on is odd and more of an \u0026#39;arc ball\u0026#39; implementation that follows a player. The camera has an invisible \u0026#39;view sphere\u0026#39; with a camera eye on one point of the spehere and a lookat target on the other.\u003c/p\u003e\n\u003cp\u003eThis implementation is also agnostic to input devices. The player can use mouse+keyboard, a touch screen, or gamepad. This implementation assumes the player has a directional input for movement like WASD keys or Dpad. It is also assumed the player has another input for camera control like a mouse, analog stick, or touch screen. For the sake of consistency we will assume keyboard and mouse inputs.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/sketch_overview.png\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/sketch_overview.png\" alt=\"sketch of a game engine agnostic third person camera controler\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eCrude sketch of the entire system\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\n\n\u003cp\u003eThe following implementation uses some fake pseudocode to demonstarte the math mechanics. Mainly it demonstrates the required values and their relative mutations. I am documenting the implementation in this post so I will remember how to do it in the future.\u003c/p\u003e\n\u003ch2 id=\"start-with-the-front-vector\"\u003eStart with the front vector.\u003c/h2\u003e\n\u003cp\u003eSetup a basic scene with a character mesh and a perspective camera. The character mesh and camera should face the world front vector this vector depends on the coordinate system of your game engine. The coordinate system of the latest engine I\u0026#39;m using is a Z up axis and the X axis is forward. This is similiar to the Unreal engines coordinate system. Previously I was working in a Y up and Z forward coordinate system. \u003ca href=\"https://twitter.com/freyaholmer/status/1325556229410861056\"\u003eFreya Holmér has produced helpful chart on which tools use which coordinate systems\u003c/a\u003e It really dosen\u0026#39;t matter what world vector you use as long as the camera and character default to facing the same vector and you consistenly use it for all view calculations.\u003c/p\u003e\n\u003ch2 id=\"set-a-default-offset-for-the-view-sphere\"\u003eSet a default offset for the view sphere\u003c/h2\u003e\n\u003cp\u003eNext you want to create an offset vector that is the \u003cstrong\u003e\u0026quot;view sphere offset\u0026quot;\u003c/strong\u003e. This is the vector that will translate the camera to a position over the shoulder of the player. This offset should be relative to the players position. You could update this vector on each frame as the player moves or you could make it a child entity of the player entity so it is calculated by the engine entity transform heiarchy. In our implementation we will manually be updating it each frametick.\u003c/p\u003e\n\u003ch2 id=\"set-the-default-camera-and-target-positions\"\u003eSet the default camera and target positions\u003c/h2\u003e\n\u003cp\u003eNext you will set the initial values for the camera \u003cstrong\u003eeye\u003c/strong\u003e and camera \u003cstrong\u003elookat\u003c/strong\u003e positions. These vectors will be relative to the view sphere offset vector. They will be on opposite sides of the view sphere sphere. They extend forward and back from the view sphere center.\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ecamera_lookat_position = view_sphere_offset + world_front * view_sphere_radius;\ncamera_eye_position = view_sphere_offset - world_front * view_sphere_radius;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe difference between the two is the addition and minus operations to the camera offset. The addition operation of the \u003ccode\u003ecamera_target_position\u003c/code\u003e moves the camera positively to the front and the minus operation moves the \u003ccode\u003ecamera_eye_position\u003c/code\u003e to the back.\u003c/p\u003e\n\u003cp\u003eAt this point we have all the components for a static over the shoulder view of our player mesh. Next we will add code to to handle player input.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/default_view.png\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/default_view.png\" alt=\"default view of engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eDefault position of player and camera\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003ch2 id=\"the-player-rotation-quaternion\"\u003eThe player rotation quaternion\u003c/h2\u003e\n\u003cp\u003eThe first player input we want to address is horizontal axis rotation. The horizontal axis rotation will effect all our other movement calculations. We will need a quaternion to handle horizontal rotation. When the mouse moves on the X axis we rotate the horizontal quaternion on the around the vertical axis. this looks like:\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ehorizontal_rotation_quat *= new_quaternion_from_rotation_z(delta_mouse_position_x * mouse_sensitivity)\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis code assumes the quaternion implementation you\u0026#39;re using has \u003ccode\u003efrom_rotation\u003c/code\u003e methods that take a euler angle and create a new quaternion from that angle.\nEach gameplay frame we will use the \u003ccode\u003ehorizontal_rotation_quat\u003c/code\u003e to update the players rotation and heading, we will apply the rotation value in the next section.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/horizontal_rotation.gif\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/horizontal_rotation.gif\" alt=\"horizontal rotation in game engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eHorizontal rotation. orb is center point of the view sphere\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\n\n\u003ch2 id=\"handling-player-movement-input\"\u003eHandling player movement input\u003c/h2\u003e\n\u003cp\u003eNow that we have our heading for the players horizontal direction it makes sense to tackle the WASD input We need a few new variables to capture this:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eplayer_forward_vector - The vector the player is facing and and headed towards\u003c/li\u003e\n\u003cli\u003eplayer_right_vector - The vector to the players right that they can strafe towards\u003c/li\u003e\n\u003cli\u003eplayer_direction - a vector combining the players forward and right vectors indicating their heading\u003c/li\u003e\n\u003cli\u003eplayer_speed - a scaler value represening movement speed\u003c/li\u003e\n\u003c/ul\u003e\n\u003cpre\u003e\u003ccode\u003eplayer_forward_vector = horizontal_rotation_quat * world_front_vec;\nplayer_right_vector = horizontal_rotation_quat * world_right;\nplayer_direction = [0,0,0] // empty vector\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eWith those heading vectors in place we can handle the WASD inputs. Assuming we have a keydown input handler:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eif(keydown == W) player_direction += player_forward\nif(keydown == S) player_direction -= player_forward\nif(keydown == A) player_direction -= player_right\nif(keydown == D) player_direction += player_right\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003efinally we can update the players position based on the direction and speed\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003eplayer_position = player_direction * speed;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis code will update the player mesh. We also need to apply the \u003ccode\u003ehorizontal_rotation_quat\u003c/code\u003e to the camera view and target offests\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ecamera_rotation_quat = horizontal_rotation_quat\ncamera_front_vector = camera_rotation_quat * world_front;\nview_sphere_offset = world_up_vector * up_offset + player_right_vector * right_offset;\n\ntarget_distance_from_player = camera_front * distance;\ncamera_distance_from_player = -camera_front * distance;\ncamera_target_position = player_position + view_sphere_offset + target_distance_from_player;\n\ncamera_eye_position = player_position + view_sphere_offset +\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eNow we have the basics of a third person camera. The player can move and rotate on the horizontal axis and the camera will rotate with the player.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/movement.gif\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/movement.gif\" alt=\"movement and horizontal rotation in game engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eKeyboard movement enabled\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003ch2 id=\"vertical-rotation-and-aim\"\u003eVertical rotation and aim\u003c/h2\u003e\n\u003cp\u003eNext let us handle vertical rotation. This is where I\u0026#39;ve seen gaps in many third person camera learning resources. To capture vertical aim we will create another quaternion similiar to the horizontal_rotation_quat. The new quaternion will be called \u003ccode\u003evertical_rotation_quat\u003c/code\u003e and we will update it from the mouse Y axis movement deltas.\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003evertical_rotation_quat *= new_quaternion_from_rotation_y(delta_mouse_position_y * mouse_sensitivity)\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"combine-vertical-and-horizontal-quaternions\"\u003ecombine vertical and horizontal quaternions\u003c/h3\u003e\n\u003cp\u003eNow that we are capturing horizontal and vertical rotation input we will combine them in to a new quaternion we\u0026#39;ll for the overal camera translation\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003ecamera_rotation_quat = horizontal_rotation_quat * vertical_rotation_quat;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThe \u003ccode\u003ecamera_rotation_quat\u003c/code\u003e is used to determine what is the cameras front direction:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003ecamera_front = camera_rotation_quat * world_front\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003egiven the cameras front vector we can project vectors forward and back from the view_sphere_center to give us the position of the lookat and eye. We then have all the data we need to set the final \u003ccode\u003elookat\u003c/code\u003e and \u003ccode\u003eeye\u003c/code\u003e position. This captures all expected user input: WASD movement, Mouse vertical and horizontal look movement.\u003c/p\u003e\n\u003cfigure class=\"wp-block-image size-large\"\u003e\n \u003ca href=\"/assets/blog/engine-agnostic-camera/allaxis.gif\"\u003e\n \u003cimg src=\"/assets/blog/engine-agnostic-camera/allaxis.gif\" alt=\"movement and vertical rotation in game engine agnostic third person camera\" class=\"wp-image-13127\"\u003e\n \u003c/a\u003e\n \u003cfigcaptiaon class=\"wp-element-caption\"\u003eKeyboard movement enabled, vertical, horizontal rotation\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\n\u003ch2 id=\"game-engine-agnostic-third-person-camera-controller-peusdocode\"\u003eGame engine agnostic third person camera controller peusdocode\u003c/h2\u003e\n\u003cp\u003eThe following is a peusdocode implementation of the mechanics discussed above. It contains a \u003ccode\u003efor_each_frame do:\u003c/code\u003e section which is synonymous to a update handler in any game engine.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003eworld_front = X_axis\nworld_right = Y_axis\nworld_up = Z_axis\n\nplayer_position = [0,0,0]\nplayer_front = world_front\nplayer_speed = 5;\n\nview_sphere_up_offset = 7;\nview_sphere_right_offset = 2;\nview_sphere_radius = 7\nview_sphere_offset = player_position + world_up * view_sphere_up_offset + world_right * view_sphere_right_offset;\ncamera_lookat_position = view_sphere_offset + world_front * view_sphere_radius;\ncamera_eye_position = view_sphere_offset - world_front * view_sphere_radius;\ncamera_front = world_front\n\nhorizontal_rotation_quat = [0,0,0,0]\nvertical_rotation_quat = [0,0,0,0]\n\nmouse_sensitivity = 5;\n\nfor_each_frame do:\n // update rotation quaternions with mouse delta changes\n horizontal_rotation_quat *= new_quat_from_z_rotation_angle(mouse_delta_x * mouse_sensitivity)\n vertical_rotation_quat *= new_quaternion_from_rotation_y(delta_mouse_position_y * mouse_sensitivity)\n\n // update player forward and right vectors with new rotation\n player_forward = horizontal_rotation_quat * world_front;\n player_right = horizontal_rotation_quat * world_right;\n\n // set player direction based on WASD keyboard input\n player_direction = [0,0,0] // empty vector\n if(keydown == W) player_direction += player_forward\n if(keydown == S) player_direction -= player_forward\n if(keydown == A) player_direction -= player_right\n if(keydown == D) player_direction += player_right\n\n // update player position with new direction and speed\n player_position += player_direction * player_speed;\n\n //update view_sphere_offset to the new player_right vector\n view_sphere_offset = world_up * view_sphere_up_offset + player_right * view_sphere_right_offset;\n\n // create a camera rotation quat from the horizontal and vertical rotations\n camera_rotation_quat = horizontal_rotation_quat * vertical_rotation_quat;\n\n // create a camera front vector that applies the camera rotation to the world front\n camera_front = camera_rotation_quat * world_front\n\n // project the eye and offset out from the view sphere center by a radius\n // lookat is positive so its in front of player\n // eye is negative so it is behind player\n camera_lookat_offset = camera_front + view_sphere_radius\n camera_eye_offset = camera_front - view_sphere_radius\n\n // finally calculate the camera look at and eye positions\n camera_lookat_position = player_position + view_sphere_offset + camera_lookout_offset;\n camera_eye_position = player_position + view_sphere_offset + camera_eye_offset;\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"additional-third-person-camera-features\"\u003eAdditional third person camera features\u003c/h2\u003e\n\u003cp\u003eThis is a fairly functional third person camera implmentation but there are extra cirricular features to ad\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eclamp the vertical rotations\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eThe current implementation has no limit on the vertical rotation. This is a problem because the camera can easily flip over or under the player mesh. To alleviate this we would create a variable that represents the vertical euler angle rotation like \u003ccode\u003ecamera_pitch\u003c/code\u003e. This pitch variable would be updated each frame with the mouse coordinates like we do with the \u003ccode\u003evertical_rotation_quaternion\u003c/code\u003e the \u003ccode\u003ecamera_pitch\u003c/code\u003e would then be clamped at max min values to prevent the flipping. The \u003ccode\u003evertical_rotation_quaternion\u003c/code\u003e would then be generated from the pitch angle using the same \u003ccode\u003enew_quaternion_from_rotation_y\u003c/code\u003e helper function.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003edecouple the horizontal rotations\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eIn this current implementation the player and camera horizontal rotations are coupled and use the same \u003ccode\u003ehorizontal_rotation_quat\u003c/code\u003e This coupling enforces that the player and camera are always facing the same direction. We could give the player and camera seperate horizontal rotation quaternions which would enable the camera to freely rotate the view sphere space while the player mesh could look in other directions. This camera experience is similiar to what you seein in AAA thrid person camera games like From Software titles.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"summary\"\u003eSummary\u003c/h2\u003e\n\u003cp\u003eThis camera system is my niave implementation that came togeter after random hacking. I could not get a pitch, yaw, polar coordinate implementation working. Let me know in the comments if there are more correct ways to implement this type of camera system or any improvements.\u003c/p\u003e\n","categories":[{"uri":"/category/blog/","name":"Blog"}]},"legalPages":[{"ID":11163,"post_name":"privacy-policy","post_title":"Privacy Policy"},{"ID":11175,"post_name":"terms-and-conditions","post_title":"Terms and Conditions"},{"ID":11181,"post_name":"disclaimer","post_title":"Disclaimer"}],"settings":[{"siteurl":"https://radcade.com","blogdescription":"Radical free web games and game journalism","blogname":"RadCade","siturl":"http://localhost:3000"}],"menu":[{"label":"Blog","path":"/category/blog/"},{"label":"Arcade","path":"/category/arcade/"},{"label":"Multiplayer","path":"/category/multiplayer/"},{"label":"Action","path":"/category/action/"},{"label":"Strategy","path":"/category/strategy/"}],"categories":[{"term_id":1,"name":"Uncategorized","taxonomy":"category","slug":"uncategorized","uri":"/category/uncategorized/","post_count":1},{"term_id":2,"name":"Action","taxonomy":"category","slug":"action","uri":"/category/action/","post_count":22},{"term_id":3,"name":"Adventure","taxonomy":"category","slug":"adventure","uri":"/category/adventure/","post_count":7},{"term_id":4,"name":"Arcade","taxonomy":"category","slug":"arcade","uri":"/category/arcade/","post_count":66},{"term_id":5,"name":"Board Game","taxonomy":"category","slug":"boardgame","uri":"/category/boardgame/","post_count":309},{"term_id":10,"name":"Driving","taxonomy":"category","slug":"driving","uri":"/category/driving/","post_count":7},{"term_id":12,"name":"Fighting","taxonomy":"category","slug":"fighting","uri":"/category/fighting/","post_count":2},{"term_id":14,"name":"Multiplayer","taxonomy":"category","slug":"multiplayer","uri":"/category/multiplayer/","post_count":24},{"term_id":15,"name":"Other","taxonomy":"category","slug":"other","uri":"/category/other/","post_count":142},{"term_id":16,"name":"Puzzles","taxonomy":"category","slug":"puzzles","uri":"/category/puzzles/","post_count":37},{"term_id":18,"name":"Shooting","taxonomy":"category","slug":"shooting","uri":"/category/shooting/","post_count":3},{"term_id":20,"name":"Strategy","taxonomy":"category","slug":"strategy","uri":"/category/strategy/","post_count":4}],"posts":[{"ID":13170,"post_date":"2023-03-28 17:48:29","title":"Subway Clash 3D","excerpt":"You fight in an underground area of Moscow metro full of angry KGB soldiers trying to bring you down. Pick up various weapons to defend yourself and lead to the top of rank table!\u003cbr /\u003eWASD - movement","uri":"/subway-clash-3d/","_thumbnail_id":"13169","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/S/subway-clash-3d.jpg","categories":[{"uri":"/category/shooting/","name":"Shooting"}],"categories_json":[{"uri":"/category/shooting/","name":"Shooting"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/S/subway-clash-3d.jpg"},{"file":"subway-clash-3d-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":15348,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-clash-3d-300x225.jpg"},{"file":"subway-clash-3d-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":7341,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-clash-3d-150x150.jpg"},{"file":"subway-clash-3d-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":5713,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-clash-3d-127x127.jpg"},{"file":"subway-clash-3d-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":5247,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-clash-3d-120x120.jpg"}]},{"ID":13168,"post_date":"2023-03-28 17:46:21","title":"Subway Surf 2","excerpt":"Subway Surf 2 is an endless runner game. As the hooligans run, they grab gold coins out of the air while simultaneously dodging collisions with railway cars.\u003cbr /\u003eControls Mouse Arrows","uri":"/subway-surf-2/","_thumbnail_id":"13167","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/S/subway-surf-2.jpg","categories":[{"uri":"/category/action/","name":"Action"}],"categories_json":[{"uri":"/category/action/","name":"Action"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/S/subway-surf-2.jpg"},{"file":"subway-surf-2-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":18935,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-surf-2-300x225.jpg"},{"file":"subway-surf-2-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":8093,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-surf-2-150x150.jpg"},{"file":"subway-surf-2-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":6390,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-surf-2-127x127.jpg"},{"file":"subway-surf-2-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":5937,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/subway-surf-2-120x120.jpg"}]},{"ID":13165,"post_date":"2023-03-28 16:27:13","title":"Panzerkrieg Simulator","excerpt":"Yo dude, you into tanks and wanna rack up some serious points by taking down some enemies? Look no further, this here simulator is perfect for gettin' ya take action on. Pick your fave weapon and blas","uri":"/panzerkrieg-simulator/","_thumbnail_id":"13164","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/P/panzerkrieg-simulator.jpg","categories":[{"uri":"/category/action/","name":"Action"}],"categories_json":[{"uri":"/category/action/","name":"Action"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/P/panzerkrieg-simulator.jpg"},{"file":"panzerkrieg-simulator-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":18903,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/P/panzerkrieg-simulator-300x225.jpg"},{"file":"panzerkrieg-simulator-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":6945,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/P/panzerkrieg-simulator-150x150.jpg"},{"file":"panzerkrieg-simulator-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":5181,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/P/panzerkrieg-simulator-127x127.jpg"},{"file":"panzerkrieg-simulator-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":4770,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/P/panzerkrieg-simulator-120x120.jpg"}]},{"ID":13162,"post_date":"2023-02-22 01:18:17","title":"Armed With Wings","excerpt":"Armed With Wings is a sword-fighting action game with a platformer element.\u003cbr /\u003eTap To Play ","uri":"/armed-with-wings/","_thumbnail_id":"13161","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/A/armed-with-wings.jpg","categories":[{"uri":"/category/adventure/","name":"Adventure"}],"categories_json":[{"uri":"/category/adventure/","name":"Adventure"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/A/armed-with-wings.jpg"},{"file":"armed-with-wings-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":8265,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armed-with-wings-300x225.jpg"},{"file":"armed-with-wings-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":4490,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armed-with-wings-150x150.jpg"},{"file":"armed-with-wings-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":3739,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armed-with-wings-127x127.jpg"},{"file":"armed-with-wings-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":3460,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armed-with-wings-120x120.jpg"}]},{"ID":13160,"post_date":"2023-02-22 01:12:08","title":"Gun Mayhem Redux","excerpt":"Gun Mayhem is finally back, after the smash hit Gun Mayhem 2. After a long break, you can now battle your friends or the AI in the epic Gun Mayhem Redux. There are 21 unique weapons with 2 fire modes ","uri":"/gun-mayhem-redux/","_thumbnail_id":"13159","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/G/gun-mayhem-redux.jpg","categories":[{"uri":"/category/action/","name":"Action"}],"categories_json":[{"uri":"/category/action/","name":"Action"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/G/gun-mayhem-redux.jpg"},{"file":"gun-mayhem-redux-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":13762,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/G/gun-mayhem-redux-300x225.jpg"},{"file":"gun-mayhem-redux-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":6843,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/G/gun-mayhem-redux-150x150.jpg"},{"file":"gun-mayhem-redux-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":5527,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/G/gun-mayhem-redux-127x127.jpg"},{"file":"gun-mayhem-redux-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":5087,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/G/gun-mayhem-redux-120x120.jpg"}]},{"ID":13157,"post_date":"2023-02-02 17:05:30","title":"Armour Crush","excerpt":"Armour Crush is a strategy tank deployment game. Objective is to destroy the opponent base by deploying the tanks. Deploy at least 3 tanks to advance towards enemy base. Selecting the right tanks at a","uri":"/armour-crush/","_thumbnail_id":"13156","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/A/armour-crush.jpg","categories":[{"uri":"/category/puzzles/","name":"Puzzles"}],"categories_json":[{"uri":"/category/puzzles/","name":"Puzzles"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/A/armour-crush.jpg"},{"file":"armour-crush-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":17801,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armour-crush-300x225.jpg"},{"file":"armour-crush-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":7304,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armour-crush-150x150.jpg"},{"file":"armour-crush-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":5616,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armour-crush-127x127.jpg"},{"file":"armour-crush-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":5207,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/A/armour-crush-120x120.jpg"}]},{"ID":13155,"post_date":"2023-02-02 17:02:50","title":"Offroad Racing 2D","excerpt":"Offroad Racing 2D is a fun racing game with multiple cars and levels.\u003cbr /\u003eUse arrows to play","uri":"/offroad-racing-2d/","_thumbnail_id":"13154","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/O/offroad-racing-2d.jpg","categories":[{"uri":"/category/driving/","name":"Driving"}],"categories_json":[{"uri":"/category/driving/","name":"Driving"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/O/offroad-racing-2d.jpg"},{"file":"offroad-racing-2d-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":15224,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/O/offroad-racing-2d-300x225.jpg"},{"file":"offroad-racing-2d-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":7613,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/O/offroad-racing-2d-150x150.jpg"},{"file":"offroad-racing-2d-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":5888,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/O/offroad-racing-2d-127x127.jpg"},{"file":"offroad-racing-2d-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":5436,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/O/offroad-racing-2d-120x120.jpg"}]},{"ID":13153,"post_date":"2023-02-02 16:57:21","title":"Battle of Orcs","excerpt":"Battle of Orcs is real time strategy units deployment game. Objective is to destroy the opponent base by deploying the orcs. Try different combination of units to make effective attack force. Selectin","uri":"/battle-of-orcs/","_thumbnail_id":"13152","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/B/battle-of-orcs.jpg","categories":[{"uri":"/category/action/","name":"Action"}],"categories_json":[{"uri":"/category/action/","name":"Action"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/B/battle-of-orcs.jpg"},{"file":"battle-of-orcs-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":20061,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/B/battle-of-orcs-300x225.jpg"},{"file":"battle-of-orcs-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":9009,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/B/battle-of-orcs-150x150.jpg"},{"file":"battle-of-orcs-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":7010,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/B/battle-of-orcs-127x127.jpg"},{"file":"battle-of-orcs-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":6523,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/B/battle-of-orcs-120x120.jpg"}]},{"ID":13151,"post_date":"2023-02-02 16:55:48","title":"Skate Hooligans","excerpt":"Cowabunga! Little hooligans are on the way! Choose your hero and arrange an amazing disorder ^_^ Collect coins, upgrade bonuses, buy cool skateboards, avoid dangerous obstacles and get scores as much ","uri":"/skate-hooligans/","_thumbnail_id":"13150","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/S/skate-hooligans.jpg","categories":[{"uri":"/category/action/","name":"Action"}],"categories_json":[{"uri":"/category/action/","name":"Action"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/S/skate-hooligans.jpg"},{"file":"skate-hooligans-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":18333,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/skate-hooligans-300x225.jpg"},{"file":"skate-hooligans-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":8242,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/skate-hooligans-150x150.jpg"},{"file":"skate-hooligans-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":6485,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/skate-hooligans-127x127.jpg"},{"file":"skate-hooligans-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":6012,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/S/skate-hooligans-120x120.jpg"}]},{"ID":13149,"post_date":"2023-02-02 16:48:53","title":"Table Tug Online","excerpt":"Try to tug the table and bring your opponent across the line. Play local two player mode or challenge players online from around the world.\u003cbr /\u003eSpacebar or tap to tug","uri":"/table-tug-online/","_thumbnail_id":"13148","author_name":"RadCade","featured_image_url":"/wp-content/uploads/thumbs/gamemonetize/T/table-tug-online-1.jpg","categories":[{"uri":"/category/multiplayer/","name":"Multiplayer"}],"categories_json":[{"uri":"/category/multiplayer/","name":"Multiplayer"}],"images":[{"height":384,"width":512,"sourceUrl":"undefined/thumbs/gamemonetize/T/table-tug-online-1.jpg"},{"file":"table-tug-online-1-300x225.jpg","width":300,"height":225,"mime-type":"image/jpeg","filesize":11848,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/T/table-tug-online-1-300x225.jpg"},{"file":"table-tug-online-1-150x150.jpg","width":150,"height":150,"mime-type":"image/jpeg","filesize":6011,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/T/table-tug-online-1-150x150.jpg"},{"file":"table-tug-online-1-127x127.jpg","width":127,"height":127,"mime-type":"image/jpeg","filesize":4903,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/T/table-tug-online-1-127x127.jpg"},{"file":"table-tug-online-1-120x120.jpg","width":120,"height":120,"mime-type":"image/jpeg","filesize":4606,"sourceUrl":"/wp-content/uploads/thumbs/gamemonetize/T/table-tug-online-1-120x120.jpg"}]}],"relatedPosts":[]}},"__N_SSG":true},"page":"/[...slug]","query":{"slug":["game-engine-agnostic-third-person-camera"]},"buildId":"GnEDORgQqCVW-Fo1XnmS5","isFallback":false,"gsp":true,"scriptLoader":[{"strategy":"afterInteractive","src":"https://www.googletagmanager.com/gtag/js?id=UA-155205412-1"},{"id":"google-analytics","strategy":"afterInteractive","dangerouslySetInnerHTML":{"__html":"\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'UA-155205412-1', {\n page_path: window.location.pathname,\n });\n "}},{"strategy":"afterInteractive","src":"https://www.googletagmanager.com/gtag/js?id=G-19N0N0TE0E"},{"id":"google-analytics-ga4","strategy":"afterInteractive","dangerouslySetInnerHTML":{"__html":"\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'G-19N0N0TE0E');\n "}}]}

How to build a game engine agnostic third person camera implementation

Comments

Recommended Tutorials

Other Tutorials by kev5

How to build a game engine agnostic third person camera implementation

Comments

Recommended Tutorials

Other Tutorials by kev5

Reticulating splines