In a certain point when you want to see things closer, can you zoom in the whole screen without changing the games' levels and items' size and scale?
In an swf file, you can right click to zoom in, but I want the same feature for the game using code.
Thanks.
You can play with the scaleXand scaleY properties of the DisplayObject, which holds your graphic elements.
Assumed,holder contains your stuff:
holder.scaleX = holder.scaleY = 2;
will scale the holder and all its children to double size.
Related
I'm using the OrtographicCamera.
A canvas is declared in HTML and I pass it to the renderer as shown below:
var canvas = document.getElementById("canvas")
var width = canvas.clientWidth;
var height = canvas.clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas
});
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
The problem is that the cubes I'm adding to the scene are being cut.
The scene is growing and has a height bigger than the available viewport's height.
I'd like to have scrollbars so that I can move to the bottom of the canvas and see all the cubes without having to zoom.
See the screenshot:
HTML
<div id="container">
<canvas id="canvas"></canvas>
</div>
CSS
#canvas
{
width: 100%;
height: 100%;
}
Any advice is really appreciated.
You have two things going on. The first is that the canvas needs to be larger than the client window to get scrollbars to show up. The exact size depends on your needs, but try doubling it from what you have now.
The second issue is going to be that the camera itself has left, right, top, and bottom (as well as near and far) planes that define the area within the camera's view. Increase those values when setting up the camera to get more of the scene visible in the canvas. If your width is fine, you may be able to only increase the top/bottom instead.
https://threejs.org/docs/api/cameras/OrthographicCamera.html
I used orbitcontrols and managed to get what I wanted, that is, being able to see the hidden objects in the scene. The user just have to press arrow down and arrow up to move the camera down\up.
No need to fiddle with the canvas element at all. That's good because controlling the canvas size in CSS is a bit hard and much more when there's scrolling involved and having it attached to ThreeJS renderer.
https://github.com/mattdesl/three-orbit-controls
i'm starting to build this bootstrap site where I have flash animation on my fontpage. --> http://testi9.aada.fi/index.php?cID=180
My animation size is 1472px x 485px. Now I want it to be 100% width on bootstrap site so that it would strech nicely on different screen sizes.
I added this css code on bootstrap css file:
#swfcontent169 {
border:solid thin #f00;
width:100%;
}
Now my flash animation is 100% but somehow those "symbols" that are
on my flash animation on each side are visible too and animation is not stretched as i would like it to be (full width).
Can someone help me out with this?
// Mika
You need to set the proper scaling mode for the flash object. (the scale embed property) or stage.scaleMode through AS3 code.
Here is a visual rundown of the options: (you will likely want exact fit or no border)
Let's say this is your document:
We have four boxes (one per corner), and some gray boxes that are off the stage.
Here are you options:
Show All:
Show all scales the content so the whole stage fits, but then you get a gutter if it's not the right size and objects off stage may be visible.
No Border:
This will scale it so the whole content will fill the bounds (keeping aspect), but then if it's not the exact size, you'll get cropping of the stage, see how the boxes are being cropped on the top bottom? You can change the way it aligns the cropped stage with the stageAlign property.
Exact Fit
This will just make the whole stage fit in the area defined, but it will not honor your aspect ratio and things could looked squished/stretched.
No Scale
This won't scale the stage AT ALL. So if the defined area is smaller than the stage, it will crop it, if larger, you'll get gutters.
You probably want exact fit or no border - depending on if you need the aspect ratio to be fixed. You can also use no-scale and use code to align your contents the way you want.
You can align the content several ways too using the align embed parameter.
You can adjust these in your embed code. There are also options in the FlashPro publish settings (when you click on the HTML Wrapper Format), or you can use an online tool like: http://embed-swf.org/embed-swf.php
Documentation for the stageWidth property of the stage object states that:
If the value of the Stage.scaleMode property is set to
StageScaleMode.NO_SCALE when the user resizes the window, the Stage
content maintains its defined size while the stageWidth property
changes to reflect the new width size of the screen area occupied by
the SWF file. (In the other scale modes, the stageWidth property
always reflects the original width of the SWF file.)
But is there any way to affect that original width of the stage, without recompiling swf?
The stageWidth and stageHeight can not be set. They are based on the stagescalemode and the html container.
Or lets say there is a limited huge artboard what is the displayable area in flash(not regarding stageWidth).
If your swf has StageScaleMode.NO_SCALE its stageWidth will tell you the width of its container.And it will always fit its parent html element by showing you more or less of this artboard. But this can not directly be set by as3. To do so you need js.
If you have any StageScaleMode that scales the swf. Then its getting messy because that limited huge artboard gets streched and distrorted to meet the fittings.One pixel in as3 doesnt mean a pixel on screen anymore. But the part of that artbord that is visible will always be the same.
I have a scrolled window, which contains a drawing area in pygtk. I would like to change the size of the drawing area, and keep the scrolled window as it is. I don't find a function that works on widgets. I can get the size and so on, but I can't set it. Could someone give me a pointer to the solution?
Thanks,
v923z
It sounds like .set_size_request() is what you need. An example would be:
drawingarea.set_size_request(400, 400)
The values are the width and height of the canvas. Assuming you're ScrolledWindow is setup correctly, the scrollbars should adjust automatically to the size of the DrawingArea.
I'm trying to recreate the "tutorial" explained on the site below. It's 5 dices bouncing around on the scene. But i'm stuck at the very beginning :)
papervision3d-jiglib-dice-demo
My problem is the bounding box. I want to create a box with a floor and 4 walls based on the size of the stage. I can get it the right size using zoom/focus on the camera. But the problem is the dices go through it.
How can i build 4 walls and make sure a dice doesnt go through it when i apply forces to it?
I tried the solution in the following source, but somehow the dices keep going through :(
throwing-dice-with-the-jiglib-physics-engine-and-away3d
Anybody knows how to do it? Or a better way to keep the dices on screen?
I solved the problem. Just to share with others who want to try the same:
Set camera zoom = 2
Set camera focus = distance / zoom
// now the scene width and height match the actual size of the stage.
add the planes for all sides and make sure you make the segments smaller then the dice size. (EG: dice size = 30; stage width = 300; segments = stage width/ dice size = 10).
make sure you ceil the results because segments require int
Ofcourse you can make it larger, but then it will be harder to render.
I made the height of the planes a little smaller then twice the dice size to make sure they never get on top of eachother.
And finally add a ceiling by placing another plane with small segments on top of the other planes