I try to draw 2D texts for my 3D world objects with libgdx's camera.project function but have a weird problem.
See the pics below:
As you can see in the pictures, all is well in picture 1 but when I turn around 180 degrees the ball's name (codename 1) is be drawing the blank space also (picture 2). I couldn't get what the problem is and after hours of thinking decided to ask here.
Please help me.
My code is:
public static void drawNames(){
TheGame.spriteBatch.begin();
for(int i = 0; i < TheGame.playerMap.size; i++){
Player ply = TheGame.playerMap.getValueAt(i);
if(!ply.isAlive)
continue;
TheGame.tmpVec.set(ply.getPos().x, ply.getPos().y, ply.getPos().z);
TheGame.cam.project(TheGame.tmpVec);
TheGame.fontArialM.draw(TheGame.spriteBatch, ply.name, TheGame.tmpVec.x, TheGame.tmpVec.y, 0, Align.center, false);
}
TheGame.spriteBatch.end();
}
This is because if you project something that is behind the camera it still gets valid screen coordinates from the project method.
Consider the following that prints the screen coordinates of two world coordinates
PerspectiveCamera camera = new PerspectiveCamera(60, 800, 600);
camera.position.set(0, 0, -10);
camera.lookAt(0, 0, 0);
camera.update();
Vector3 temp = new Vector3();
Vector3 p1 = new Vector3(1, 0, 10); // This is in front of the camera, slightly to the right
Vector3 p2 = new Vector3(0, 0, -100); // This is behind of the camera
camera.project(temp.set(p1));
System.out.println("p1 is at screen " + temp);
if (camera.frustum.pointInFrustum(p1))
System.out.println("p1 is visible to the camera");
else
System.out.println("p1 is not visible to the camera");
camera.project(temp.set(p2));
System.out.println("p2 is at screen " + temp);
if (camera.frustum.pointInFrustum(p2))
System.out.println("p2 is visible to the camera");
else
System.out.println("p2 is not visible to the camera");
In your code, before rendering the text you need to check if the ply.getPos() vector is visible to the camera, and only render the text if it is.
if (TheGame.cam.frustum.pointInFrustum(ply.getPos()) {
TheGame.tmpVec.set(ply.getPos().x, ply.getPos().y, ply.getPos().z);
TheGame.cam.project(TheGame.tmpVec);
TheGame.fontArialM.draw(TheGame.spriteBatch, ply.name, TheGame.tmpVec.x, TheGame.tmpVec.y, 0, Align.center, false);
}
Note that there are other ways to cull things behind the camera that might be more efficient for you.
Related
I am using the p5.js Web Editor
var sketch = function (p) {
with(p) {
p.setup = function() {
createCanvas(400, 400);
secCanvas = createGraphics(400, 400);
secCanvas.clear();
trans = 0;
drop_size = 10;
sun_size = 50;
radius = 10;
};
p.draw = function() {
background(3, 182, 252, 1);
image(secCanvas, 0, 0)
secCanvas.fill(255, 162, 0, 1)
secCanvas.ellipse(width/2, 0 + sun_size, sun_size)
fill(40, trans)
trans = random(255);
ellipse(random(mouseX + radius, mouseX - radius), random(mouseY + radius, mouseY - radius), drop_size)
drop_size = random(50)
};
}
};
let node = document.createElement('div');
window.document.getElementById('p5-container').appendChild(node);
new p5(sketch, node);
body {
background-color:#efefef;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<div id="p5-container"></div>
When I set a discrete value of alpha in secCanvas.fill(). The value appears to be gradually increase(and stops soon), while I gave no such instruction. Why is this happening? This only happens when I put background(3, 182, 252, 1); in the draw function but not when I put it in the setup function.
Each frame is drawn on top of all previous frames, so when you draw a semi-transparent background, you can still see the previous frames underneath it.
Think of it as adding a very thin coat of paint over top what you've already painted. Because the color you're adding is semi-transparent, you can still see what's underneath it. Then during the next frame, you add another layer of paint, and the previous frames get just a little more faint.
They stop becoming more faint because of the way the computer calculates the new color, based on the previous frames and the new semi-transparent background color. Long story short, the color you're drawing is almost 100% transparent, so it's not strong enough to completely hide previous frames.
I've been looking everywhere but I can't find a way to animate a line in Pixi.js.
Given this code:
var line = new PIXI.Graphics();
line.lineStyle(1, 0xff0000);
line.moveTo(0,window.innerHeight/2);
line.lineTo(window.innerWidth/2, 0);
line.lineTo(window.innerWidth, window.innerHeight/2);
app.stage.addChild(line);
which draws this magnificient jsfiddle
I'd like to achieve this very simple line animation:
Step 1
Step 2
Of course I'm guessing this should not be complicated, but I've no idea what I'm missing...
Any help will be appreciated!
Drawing inside a graphics object is very similar in API terms to drawing to a Canvas without Pixi.
A render loop is needed where the canvas is cleared and redrawn on every loop.
Pixi provides a useful Ticker that can be used to run functions on a loop.
Here's an example (in this case an infinite animation) and a jsfiddle sample:
var line = new PIXI.Graphics(),
centerY = 0,
increment = 2;
app.stage.addChild(line);
app.ticker.add(() => {
// clear the graphics object ('wipe the blackboard')
line.clear();
// redraw a new line
drawLine(centerY);
// calculate the next position
centerY = (centerY < window.innerHeight) ? centerY = centerY + increment : 0;
});
function drawLine(centerY) {
line.lineStyle(1, 0xff0000);
line.moveTo(0,window.innerHeight/2);
line.lineTo(window.innerWidth/2, centerY);
line.lineTo(window.innerWidth, window.innerHeight/2);
}
Hello dear developers,
Im using xamarin (monotouch) i want to draw circle image view like google plus profile image or like otherones...
I was search on net but didnt find useful thing.
Somebody help me?
Thank you..
For your purposes you can use UIView or UIButton. With UIButton it is easier to handle touch events.
The basic idea is to create a UIButton with specific coordinates and size and set the CornerRadius property to be one half of the size of the UIButton (assuming you want to draw a circle, width and height will be the same).
Your code could look something like this (in ViewDidLoad of your UIViewController):
// define coordinates and size of the circular view
float x = 50;
float y = 50;
float width = 200;
float height = width;
// corner radius needs to be one half of the size of the view
float cornerRadius = width / 2;
RectangleF frame = new RectangleF(x, y, width, height);
// initialize button
UIButton circularView = new UIButton(frame);
// set corner radius
circularView.Layer.CornerRadius = cornerRadius;
// set background color, border color and width to see the circular view
circularView.BackgroundColor = UIColor.White;
circularView.Layer.CornerRadius = cornerRadius;
circularView.Layer.BorderColor = UIColor.Red.CGColor;
circularView.Layer.BorderWidth = 5;
// handle touch up inside event of the button
circularView.TouchUpInside += HandleCircularViewTouchUpInside;
// add button to view controller
this.View.Add(circularView);
At last implement the event handler (define this method somewhere in your UIViewController:
private void HandleCircularViewTouchUpInside(object sender, EventArgs e)
{
// initialize random
Random rand = new Random(DateTime.Now.Millisecond);
// when the user 'clicks' on the circular view, randomly change the border color of the view
(sender as UIButton).Layer.BorderColor = UIColor.FromRGB(rand.Next(255), rand.Next(255), rand.Next(255)).CGColor;
}
Xamarin.iOS is a wrapper over Cocoa Touch on UI side,
https://developer.apple.com/technologies/ios/cocoa-touch.html
So to draw circle you need to use the Cocoa Touch API, aka CoreGraphics,
http://docs.xamarin.com/videos/ios/getting-started-coregraphics/
I am developing a small game and I would draw a field-ground(land) with a repeated texture. My problem is the rendered result. This gives the impression of seeing everything around my cube looked as if a light shadow.
Is it possible to standardize the light or remove the shadow effect in my drawing function?
Sorry for my bad english..
Here is a screenshot to better understand my problem.
Here my code draw function (instancing model with vertexbuffer)
// Draw Function (instancing model - vertexbuffer)
public void DrawModelHardwareInstancing(Model model,Texture2D texture, Matrix[] modelBones,
Matrix[] instances, Matrix view, Matrix projection)
{
if (instances.Length == 0)
return;
// If we have more instances than room in our vertex buffer, grow it to the neccessary size.
if ((instanceVertexBuffer == null) ||
(instances.Length > instanceVertexBuffer.VertexCount))
{
if (instanceVertexBuffer != null)
instanceVertexBuffer.Dispose();
instanceVertexBuffer = new DynamicVertexBuffer(Game.GraphicsDevice, instanceVertexDeclaration,
instances.Length, BufferUsage.WriteOnly);
}
// Transfer the latest instance transform matrices into the instanceVertexBuffer.
instanceVertexBuffer.SetData(instances, 0, instances.Length, SetDataOptions.Discard);
foreach (ModelMesh mesh in model.Meshes)
{
foreach (ModelMeshPart meshPart in mesh.MeshParts)
{
// Tell the GPU to read from both the model vertex buffer plus our instanceVertexBuffer.
Game.GraphicsDevice.SetVertexBuffers(
new VertexBufferBinding(meshPart.VertexBuffer, meshPart.VertexOffset, 0),
new VertexBufferBinding(instanceVertexBuffer, 0, 1)
);
Game.GraphicsDevice.Indices = meshPart.IndexBuffer;
// Set up the instance rendering effect.
Effect effect = meshPart.Effect;
//effect.CurrentTechnique = effect.Techniques["HardwareInstancing"];
effect.Parameters["World"].SetValue(modelBones[mesh.ParentBone.Index]);
effect.Parameters["View"].SetValue(view);
effect.Parameters["Projection"].SetValue(projection);
effect.Parameters["Texture"].SetValue(texture);
// Draw all the instance copies in a single call.
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
Game.GraphicsDevice.DrawInstancedPrimitives(PrimitiveType.TriangleList, 0, 0,
meshPart.NumVertices, meshPart.StartIndex,
meshPart.PrimitiveCount, instances.Length);
}
}
}
}
// ### END FUNCTION DrawModelHardwareInstancing
The problem is the cube mesh you are using. The normals are averaged, but I guess you want them to be orthogonal to the faces of the cubes.
You will have to use a total of 24 vertices (4 for each side) instead of 8 vertices. Each corner will have 3 vertices with the same position but different normals, one for each adjacent face:
If the FBX exporter cannot be configured to correctly export the normals simply create your own cube mesh:
var vertices = new VertexPositionNormalTexture[24];
// Initialize the vertices, set position and texture coordinates
// ...
// Set normals
// front face
vertices[0].Normal = new Vector3(1, 0, 0);
vertices[1].Normal = new Vector3(1, 0, 0);
vertices[2].Normal = new Vector3(1, 0, 0);
vertices[3].Normal = new Vector3(1, 0, 0);
// back face
vertices[4].Normal = new Vector3(-1, 0, 0);
vertices[5].Normal = new Vector3(-1, 0, 0);
vertices[6].Normal = new Vector3(-1, 0, 0);
vertices[7].Normal = new Vector3(-1, 0, 0);
// ...
It looks like you've got improperly calculated / no normals.
Look at this example, specifically part 3.
A normal is a vector that describes the direction that light would reflect off that vertex/poly if shined orthogonally to it.
I like this picture to demonstrate The blue lines are the normal direction at each particular point on the curve.
In XNA, you can calculate the normal of a polygon with vertices vert1,vert2,and vert3 like so:
Vector3 dir = Vector3.Cross(vert2 - vert1, vert3 - vert1);
Vector3 norm = Vector3.Normalize(dir);
In a lot of cases this is done automatically by modelling software so the calculation is unnecessary. You probably do need to perform that calculation if you're creating your cubes in code though.
I've got a little text drawing puzzle under Win32. I'm trying to draw some instructions for users of my application at the top of the window.
Please refer to the following window (I've changed the background color on the text so you can see the boundaries)
(source: billy-oneal.com)
I'm currently using DrawTextEx to draw the text to my window, but the problem is that it does not fill the entire RECTangle that I give it. Not drawing that area is just fine, until the window resizes:
(source: billy-oneal.com)
When the text is re wrapped due to the window sizing, because DrawTextEx doesn't clear it's background, these artifacts are leftover.
I tried using FillRect to fill in the area behind the text drawing call, which does eliminate the visual artifacts, but then causes the text to flicker constantly, as it is completely erased and then completely redrawn to the display.
Any ideas on how one might get the area not containing text to be drawn with the background color?
EDIT: I'd like to avoid having to double buffer the form if at app possible.
EDIT2: I solved the problem by only redrawing the text when I detect that the wrapping changes during a resize.
Use double buffering?
Draw everything to a bitmap and draw the bitmap to the window. Flickering is commonly a double buffering issue.
There are many possible solutions and without seeing your code, it's hard to tell which method would be best so I'd suggest taking a look at this article on flicker free drawing
SetBkMode + SetBkColor ?
Well since nobody seems to know what to do about it, I implemented it this way:
std::vector<std::wstring> wrapString(HDC hDC, const std::wstring& text, const RECT& targetRect, HFONT font)
{
std::vector<std::wstring> result;
RECT targetRectangle;
CopyRect(&targetRectangle, &targetRect);
//Calculate the width of the bounding rectangle.
int maxWidth = targetRectangle.right - targetRectangle.left;
//Draw the lines one at a time
std::wstring currentLine;
for(std::wstring::const_iterator it = text.begin(); it != text.end(); currentLine.push_back(*it), it++)
{
if(*it == L'\r' || *it == L'\n')
{ //Hard return
while(it != text.end() && (*it == L'\r' || *it == L'\n')) it++;
result.push_back(currentLine);
currentLine.clear();
}
else
{ //Check for soft return
SIZE sizeStruct;
GetTextExtentPoint32(hDC, currentLine.c_str(), static_cast<int>(currentLine.length()), &sizeStruct);
if (sizeStruct.cx > maxWidth)
{
std::wstring::size_type lineLength = currentLine.find_last_of(L' ');
if (lineLength == currentLine.npos)
{ //Word is longer than a line.
for(;it != text.end() && !iswspace(*it);it++) currentLine.push_back(*it);
}
else
{ //Clip word to line.
//Backtrack our scan of the source text.
it -= currentLine.length() - lineLength - 1;
//Remove the clipped word
currentLine.erase(lineLength);
}
result.push_back(currentLine);
currentLine.clear();
}
}
}
//Last remaining text.
result.push_back(currentLine);
return result;
}
void DrawInstructionsWithFilledBackground(HDC hDC, const std::wstring& text, RECT& targetRectangle, HFONT font, COLORREF backgroundColor)
{
//Set up our background color.
int dcIdx = SaveDC(hDC);
HBRUSH backgroundBrush = CreateSolidBrush(backgroundColor);
SelectObject(hDC, backgroundBrush);
SelectObject(hDC, font);
SetBkColor(hDC, backgroundColor);
std::vector<std::wstring> lines(wrapString(hDC, text, targetRectangle, font));
for(std::vector<std::wstring>::const_iterator it = lines.begin(); it!=lines.end(); it++)
{
RECT backgroundRect = targetRectangle;
DrawText(hDC, const_cast<LPWSTR>(it->c_str()), static_cast<int>(it->length()), &backgroundRect, DT_CALCRECT | DT_NOCLIP | DT_SINGLELINE);
backgroundRect.left = backgroundRect.right;
backgroundRect.right = targetRectangle.right;
if (backgroundRect.right >= backgroundRect.left)
FillRect(hDC, &backgroundRect, backgroundBrush);
ExtTextOut(hDC, targetRectangle.left, targetRectangle.top, ETO_OPAQUE, NULL, it->c_str(), static_cast<UINT>(it->length()), NULL);
targetRectangle.top += backgroundRect.bottom - backgroundRect.top;
}
instructionsWrap = lines;
//Restore the DC to it's former glory.
RestoreDC(hDC, dcIdx);
DeleteObject(backgroundBrush);
}
Get/Calculate the rect used by the DrawText call and clip it with something like ExcludeClipRect before calling FillRect