I am trying to get bounding spheres to display correctly for my models so I can see what is happening when I do collision tests. I cannot get the bounding spheres to draw in the correct location. The models look fine. I believe the problem is in the transformation step for the bounding spheres. The sphere itself is a simple .x file with a radius of 1 unit (in boundingSphereModel). I then scale it to the actual mesh's bounding sphere radius. I do have spheres with various radii but they all display in a clump at the feet of the player instead of over the various body parts. What am I doing wrong?
Here is my code:
private void drawPlayer(Matrix viewMatrix, Player player)
{
SkinnedModel skinnedModel = player.getModel();
Matrix[] boneTransforms = new Matrix[skinnedModel.Model.Bones.Count];
skinnedModel.Model.CopyAbsoluteBoneTransformsTo(boneTransforms);
Matrix transformationMatrix = player.getWorldTransformation();
foreach (ModelMesh modelMesh in player.getMeshes())
{
if (drawBoundingSpheres)
{
int boneIndex = modelMesh.ParentBone.Index;
Matrix boneTransform = boneTransforms[boneIndex];
GraphicsDevice.RenderState.FillMode = FillMode.WireFrame;
Matrix scaleMatrix = Matrix.CreateScale(modelMesh.BoundingSphere.Radius);
Matrix worldMatrix = scaleMatrix * boneTransform * transformationMatrix;
// loop through all bounding sphere's meshes, transforming & drawing them
foreach (ModelMesh boundingSphereModelMesh in boundingSphereModel.Meshes)
{
foreach (ModelMeshPart meshPart in boundingSphereModelMesh.MeshParts)
{
BasicEffect basicEffect = (BasicEffect)meshPart.Effect;
basicEffect.World = worldMatrix;
basicEffect.View = viewMatrix;
basicEffect.Projection = cameraProjection;
// configure lighting
basicEffect.AmbientLightColor = new Vector3(0.1f);
}
boundingSphereModelMesh.Draw();
}
// done with bounding spheres; switch back to solid fill mode
GraphicsDevice.RenderState.FillMode = FillMode.Solid;
}
// draw model mesh
foreach (ModelMeshPart meshPart in modelMesh.MeshParts)
{
SkinnedModelBasicEffect basicEffect = (SkinnedModelBasicEffect)meshPart.Effect;
basicEffect.World = transformationMatrix;
basicEffect.Bones = player.getBones();
basicEffect.View = viewMatrix;
basicEffect.Projection = cameraProjection;
basicEffect.Material.EmissiveColor = new Vector3(0.0f);
basicEffect.Material.DiffuseColor = new Vector3(0.8f);
basicEffect.Material.SpecularColor = new Vector3(0.3f);
basicEffect.Material.SpecularPower = 8;
basicEffect.NormalMapEnabled = false;
basicEffect.SpecularMapEnabled = false;
// configure lighting
basicEffect.AmbientLightColor = new Vector3(0.1f);
basicEffect.LightEnabled = true;
basicEffect.EnabledLights = EnabledLights.Four;
basicEffect.PointLights[0].Color = LIGHT_COLOR;
basicEffect.PointLights[0].Position = COLOR0_POSITION;
basicEffect.PointLights[1].Color = LIGHT_COLOR;
basicEffect.PointLights[1].Position = COLOR1_POSITION;
basicEffect.PointLights[2].Color = LIGHT_COLOR;
basicEffect.PointLights[2].Position = COLOR2_POSITION;
basicEffect.PointLights[3].Color = LIGHT_COLOR;
basicEffect.PointLights[3].Position = COLOR3_POSITION;
}
modelMesh.Draw();
}
}
Related
Can someone explain why part of my model flickers black when a material canvas material is added to it and when the camera moves?
Here's a shot of it before an image is added:
And after when an image has been added and camera rotated:
Notice the black marks at the top. Is this to do with the material I'm using possibly? Here's how I apply it:
for(let i = 0; i < sidesModified.length; i++) {
let sideName = sidesModified[i];
let side = this.getSideInLayersObservable(view, sideName);
let maxAnisotropy = (this.scene && this.scene['renderer']) ? this.scene['renderer'].getMaxAnisotropy() : 2;
let canvasTexture = new THREE.CanvasTexture(ctx.canvas, THREE.UVMapping, this.scene.materials.wrapS, this.scene.materials.wrapT, THREE.LinearFilter, THREE.LinearMipMapLinearFilter, THREE.RGBAFormat, THREE.UnsignedByteType, maxAnisotropy);
for(let j = 0; j < side.length; j++) {
canvasTexture.wrapS = this.scene.materials.wrapS;
canvasTexture.wrapT = this.scene.materials.wrapT;
this._reverseSideIf(this.sceneName, view, sideName, canvasTexture);
this._drawImageOnCtx(side, j, object, ctx);
}
let materialIndex = this.getMaterialIndexForBag(this.sceneName, view, sideName);
let material = this._setupMaterial(canvasTexture);
if(this.sceneName === 'two-d-scene') {
if(view === 'outside') {
this.selectedBag[0].children[materialIndex].material = material;
} else {
this.selectedBag[1].children[materialIndex].material = material;
}
} else {
this.selectedBag.children[materialIndex].material = material
}
canvasTexture.needsUpdate = true;
}
i have created wall using path in three js. I want change the color option buttion automatically need to change the color onclick event.
Below my color any one help me.
// wall 1 inside
item_count = 1;
var wall_x1 = 69;
var wall_y1 = 55;
var wall_x2 = 366;
var wall_y2 = 52;
var wall_z = 0;
var wall_width = 5;
var wall_height = default_height;
var wall_wall_width = 5;
if(!wall_wall_width) { wall_wall_width = 5; }
var wall_wall_elevation = planner_default_height;
if(!wall_wall_elevation) { wall_wall_elevation = default_height; }
var wall_top_filltype = 'texture';
var wall_top_fill = 'default_wall.jpg';
var wall_side_filltype = 'texture';
var wall_side_fill = 'wall5.jpg';
if ( item_count == 0 )
{
starting_x_value = wall_x1;
starting_y_value = wall_y1;
}
path = generate_path_byline(wall_x1,wall_y1,wall_x2,wall_y2,default_depth);
path_type ="wall";
x=starting_x_value-wall_x1; y=starting_y_value-wall_y1;
// z=default_height/2;
path_transform = transformSVGPath(path);
create_surface(1,1,path_type,path_transform,starting_x_value,starting_y_value,x,y,z,default_height,wall_wall_elevation,wall_top_filltype,wall_top_fill,wall_side_filltype,wall_side_fill);
I see no clear way of defining the material at your sample code, or at least the way three.js does it:
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
If you use as a material a texture with an image, you have many ways to change its color... one easy trick could be to change the light color that lightens the scene or this object.
Basically I want to make my sprite follow a motion path and depending on its direction it is going, it will play a particular animation. i.e. moving up will display its back, moving left will display the left side of the sprite and so on.
I've tried for hours but to no avail in trying to make this work. I had some luck using prototype but the final game will be using the structure below. ANY help will be appreciated.
/*
* initalise Phaser framework with width:960px, height:540px
*/
var game = new Phaser.Game(960, 540, Phaser.AUTO, 'gameContainer', { preload: preload, create: create, update: update, });
/*
* Preload runs before the game starts. Assets such as images and sounds such be preloaded here.
* A webserver is required to load assets.
*
* Also in this function we set game scale so it full browser width.
*/
function preload() {
// set to scale to full browser width
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.parentIsWindow = true;
//set the background color so can confirm the game renders in the browser
this.stage.backgroundColor = '#4488cc';
this.game.renderer.renderSession.roundPixels = true;
//preload images & sounds
//game.load.image('key', 'folder/filename.png');
//this.load.image('nazi', 'image/nazi.png');
game.load.spritesheet('nazi', 'images/nazi.png', 128, 128, 6);
this.bmd = null;
this.alien = null;
this.mode = 0;
//Use this website to set enemy movements http://phaser.io/waveforms. Export save data from the console log.
this.points = {
"type":0,"closed":true,"x":[120,120,260,260,200,180,120],"y":[368,108,108,308,308,368,368]
};
this.pi = 0;
this.path = [];
}
/*
* Add game variables here
*/
var nazi;
/*
* Create runs once only when Phaser first loads
* create the game scene by adding objects to the stage
*/
function create() {
bmd = this.add.bitmapData(this.game.width, this.game.height);
bmd.addToWorld();
/*
For testing
this.alien = this.add.sprite(0, 0, 'alien');
this.alien.anchor.set(0.5);
*/
this.nazi = this.add.sprite(0, 0, 'nazi');
this.nazi.anchor.set(0.5);
var py = this.points.y;
/*Original Code
//define the animation
nazi.animations.add('walk');
//start the animation at 30fps
nazi.animations.play('walk', 3, true);
*/
//define the animation
this.nazi.animations.add('walkDown', [2, 3]);
//start the animation at 30fps
this.nazi.animations.play('walkDown', 3, true);
//define the animation
this.nazi.animations.add('walkLR', [4, 5]);
//start the animation at 30fps
this.nazi.animations.play('walkLR', 3, true);
//define the animation
this.nazi.animations.add('walkUp', [0, 1]);
//start the animation at 30fps
this.nazi.animations.play('walkUp', 3, true);
}
function plot() {
this.bmd.clear();
this.path = [];
/*ROTATION CODE*/
var ix = 0;
/**/
//Sets the speed of the sprite
var x = 0.5 / game.width;
//looping through plotting points from x and y array
for (var i = 0; i <= 1; i += x) {
var px = this.math.linearInterpolation(this.points.x, i);
var py = this.math.linearInterpolation(this.points.y, i);
/* ROTATION CODE to follow direction of path*/
var node = { x: px, y: py, angle: 0 };
if (ix > 0)
{
node.angle = this.math.angleBetweenPoints(this.path[ix - 1], node);
}
this.path.push(node);
ix++;
/**/
//this.path.push( { x: px, y: py });
this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');
}
for (var p = 0; p < this.points.x.length; p++) {
this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
}
}
/*
* Update runs continuously. Its the game loop function.
* Add collision detections and control events here
*/
function update() {
plot();
// Reset the players velocity (movement)
//this.nazi = 'nazi';
/* For Testing
this.alien.x = this.path[this.pi].x;
this.alien.y = this.path[this.pi].y;
//ROTATION CODE:
this.alien.rotation = this.path[this.pi].angle;
*/
this.nazi.x = this.path[this.pi].x;
this.nazi.y = this.path[this.pi].y;
//this.nazi.rotation = this.path[this.pi].angle;
this.pi++;
if (this.pi >= this.path.length)
{
this.pi = 0;
}
/*
// Flipping the player image based on the velocity
if(nazi.body.velocity.x > 0){
//player is moving right
nazi.scale.x = -1;
nazi.animations.play('walkLR');
}
else if(nazi.body.velocity.x < 0){
//player is moving left
nazi.scale.x = 1; //flip the image
nazi.animations.play('walkLR');
}
else if (nazi.body.velocity.y < 0){
nazi.animations.play('walkUp');
}
else if(nazi.body.velocity.y > 0){
//player is not moving
nazi.animations.play('walkDown');
}
*/
}
So I have a Flash ActionScript 2 code, which creates a preset amount of enemies, gives enemies stats, and makes them move around randomly. Code:
//Settings
var mapWidth:Number = 550;
var mapHeight:Number = 400;
var enemiesArray:Array = new Array();
var totalEnemies:Number;
var eClip:MovieClip;
//Math functions
function getdistance(x, y, x1, y1)
{
run = x1-x;
rise = y1-y;
return (hyp(run, rise));
}
function hyp(a, b)
{
return (Math.sqrt(a*a+b*b));
}
function resetDirection(mc:MovieClip)
{
mc.roamTime = random(50);
mc.t = mc.roamTime;
mc.roamDistance = random(60)+25;
mc.randomRoamDistanceX = (Math.random()*mc.roamDistance)+mc.xx-(mc.roamDistance/2);
mc.randomRoamDistanceY = (Math.random()*mc.roamDistance)+mc.yy-(mc.roamDistance/2);
mc.newRoamDistance = getdistance(mc._x, mc._y, mc.randomRoamDistanceX, mc.randomRoamDistanceY);
mc.norm = mc.roamSpeed/mc.newRoamDistance;
mc.finalRoamDistanceX = (mc.randomRoamDistanceX-mc.xx)*mc.norm;
mc.finalRoamDistanceY = (mc.randomRoamDistanceY-mc.yy)*mc.norm;
}
//function to move enemies
function moveIt(mc:MovieClip)
{
//reduce roamTime;
mc.t--;
//move enemy to new position
if (getdistance(mc._x, mc._y, mc.randomRoamDistanceX, mc.randomRoamDistanceY)>mc.roamSpeed) {
mc._x += mc.finalRoamDistanceX;
mc._y += mc.finalRoamDistanceY;
}
//rotate enemy
XXXdiff = mc.xx-mc.randomRoamDistanceX;
YYYdiff = -(mc.yy-mc.randomRoamDistanceY);
rrradAngle = Math.atan(YYYdiff/XXXdiff);
if (XXXdiff<0) {
cccorrFactor = 270;
} else {
cccorrFactor = 90;
}
//
mc.ship_mc._rotation = -(rrradAngle*360/(2*Math.PI)+cccorrFactor);
//check if time to reset, based on roamTime
if (mc.t<=0) {
resetDirection(mc);
}
}
//
// Generate Enemies
//
// set and save enemy stats
//
//
// createEnemies(number of enemies you want, movieclip where you want to create the enemies);
//
function createEnemies(amount:Number, targetLocation:MovieClip) {
trace("createEnemies: "+amount);
for (var i = 0; i<amount; i++) {
randomXpos = Math.round(Math.random()*mapWidth);
randomYpos = Math.round(Math.random()*mapHeight);
//add new enemy to map
var newEnemy:MovieClip = targetLocation.attachMovie("enemy1", "enemy1_"+i, targetLocation.getNextHighestDepth());
enemiesArray.push(newEnemy);
//
//set enemy stats
newEnemy.id = i;
newEnemy._x = randomXpos;
newEnemy._y = randomYpos;
//save x and y position
newEnemy.xx = newEnemy._x;
newEnemy.yy = newEnemy._y;
//
newEnemy.roamSpeed = 2
newEnemy.roamTime = random(50);
newEnemy.roamDistance = random(60)+25;
newEnemy.t = 0;
//
newEnemy.myHealth = 10;
newEnemy.myName = "Small Scout";
//
resetDirection(newEnemy);
//target enemy
newEnemy.onPress = function() {
trace("Enemy: "+this.tName+" "+this.id);
target_txt.text = this.myName+": "+this.id+" Health: "+this.myHealth;
};
newEnemy.onEnterFrame = function() {
moveIt(this);
};
}
}
start_btn.onRelease = function() {
if (start_txt.text == "Start") {
//run the create enemies function to start the engine
createEnemies(box_mc.numberOfEnemies.text, map_mc);
//hide start button
start_txt._visible =false;
this._visible = false;
box_mc._visible = false;
}
};
I want program enemies to be grouped (based on fireflies algorithm). My idea is write for loop to define attractiveness, but I don't know how to make my objects move to the most attractiveness. Maybe someone would help me with this problem?
I change this line:
newEnemy.myHealth = 10;
on this
newEnemy.myHealth = Math.round(random(9)+1);
myHealth would be responsible for attractiveness. I try to use code from this site and modificate code to let objects with low attractiveness follow objects with large attractiveness. Also, I want to stop algorith, when they are in the groups.
I call this method on LoadContent() - after loading heightMap texture:
private void setEffect(Texture2D heightMap)
{
m_BasicEffect = new BasicEffect(this.GraphicsDevice);
m_BasicEffect.EnableDefaultLighting();
m_BasicEffect.FogEnabled = true;
m_BasicEffect.FogStart = 300f;
m_BasicEffect.FogEnd = 1000f;
m_BasicEffect.FogColor = Color.Black.ToVector3();
m_BasicEffect.TextureEnabled = true;
m_BasicEffect.World = Matrix.Identity;
m_BasicEffect.Texture = heightMap;
}
Now, if I change the "m_BasicEffect.TextureEnabled = true;" to "m_BasicEffect.TextureEnabled = false;" it works, but the texture (of course) doesn't show.
Draw method looks like this:
public override void Draw(Microsoft.Xna.Framework.GameTime i_GameTime)
{
Matrix worldMatrix = Matrix.CreateTranslation(-m_TerrainWidth / 2.0f, 0, m_TerrainHeight / 2.0f) * Matrix.CreateRotationY(m_Angle);
m_BasicEffect.View = MyCamera.View;
m_BasicEffect.Projection = MyCamera.Projection;
m_BasicEffect.World = worldMatrix;
foreach (EffectPass pass in m_BasicEffect.CurrentTechnique.Passes)
{
pass.Apply();
Game.GraphicsDevice.Indices = myIndexBuffer;
Game.GraphicsDevice.SetVertexBuffer(myVertexBuffer);
Game.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, m_VerticesNormalLength, 0, m_IndicesLength / 3);
}
}
Moreover, if I try to draw Models afterwords, it throws an exception:
"The current vertex declaration does not include all the elements required by the current vertex shader."
The way I try to draw the Models:
public override void Draw(GameTime i_GameTime)
{
Matrix[] transforms = new Matrix[MyModel.Bones.Count];
MyModel.CopyAbsoluteBoneTransformsTo(transforms);
foreach (ModelMesh mesh in MyModel.Meshes)
{
foreach (BasicEffect be in mesh.Effects)
{
be.EnableDefaultLighting();
be.Projection = MyCamera.Projection;
be.View = MyCamera.View;
be.World = GetWorld() * mesh.ParentBone.Transform;
}
mesh.Draw();
}
}
What do you think about it?
Thanks in advance.