I spend almost 3 hours trying to figure this out, hope someone can help me.
I have a a set up like this:
ScrollPane > Sprite > multiple Loader one after another along y coordinate > external swf.
The setup is to allow scrolling of the loader/swf vertically.
All the objects have unit scale (no scale) except for Sprite which may have a scale factor due to zoom.
The external swf are pages from a PDF, one page per swf.
All is good so far.
Now, I have a set of next and back navigation button to step through the pages. The problem is I cannot find the correct formula to calculate the ScrollPane.verticalScrollPosition to set to.
Can you spot the mistake here? Thanks...
scroll_per_height = scrollpane.maxVerticalScrollPosition / (sprite.height - scrollpane.height);
height_per_page = sprite.height / sprite.loaders.Count
scroll_position = (page - 1) * height_per_page * scroll_per_height;
Usually I just delete my question if i find out the answer before anyone replies. But I think this will help some people at least:
The verticalScrollPosition is not the scrollbar's scroller position, instead, it's actually the y-coordinate offset of the scrollpane.content
Related
I would like to create some mouse interactions on several moving planes and for that, I need to know which planes I'm hovering on. I've implemented the Raycasting method like in your example here but it seems like I'm hovering all my planes in the center of the canvas, just like if the raycasting method wasn't considering my position.set() modifications.
You can see here an example of what I did here, I logged the result of the hits array at the end of the canvasSlider.js file and all planes are logging when hovering in the center.
Is there a way around that? Or I'm I doing something wrong? Thanks a lot.
The main issue is that you are setting the z scale to 0.
plane.scale.set(1, size.height/size.width, 0);
Replace the 0 with a 1 to enable the hit tests to function.
Another issue I noticed was that your mouse values are relative to the screen and not the canvas. As the canvas is on a scrolling page it may not be taking up the full screen at all times.
I'll try to explain my problem in a clear and short way.
I'm writing a grid-game. In this game when the player clicks somewhere, the player moves, along the grid with a path calculated by the computer (because there's obstacles that the player avoid : walls...) to the final point.
It's an isometric grid but it's like it was a basic 2D grid.
So I have my path, which is a Point Array (key points screen coordinates) :
path : [x=10,y=100],[x=40,y=172], .. etc.
To display the movement of the player, I tried to use tweens (TweenLite/TweenMax).
There's no option on TweenLite to wait for a tween to finish before starting the next. In any case the solutions seem complicated (shitty delays/onFinish:function).
The solution I found is acceptable : TweenLite provides a LinePath2D function which works exactly like I wished. The only problem is that it works with only one function (path is the complete array):
var pathanimate:LinePath2D = new LinePath2D(path);
pathanimate.addFollower(Player);
TweenMax.to(pathanimate, 1, { progress:1, ease:Linear.easeNone });
So I can't "touch" anything during the movement. INCLUDING the aspect of the sprite of the player that must changes with the direction during each step of the path (it would be more simple if it LinePath worked with a loop).
I don't know if this is clear (i'm french huh) but I see only but two options :
Keep the LinePath and have, on each frame, some kind of counter/timer that "measures" the direction of the player. Could be heavy in ressources, but keeps the LinePath2D that works very well alone
Find another solution
I'd be glad to hear your ideas and code !
Thanks in advance
Actually I can provide several solutions, but they will include many lines of code. Briefly speaking:
System of waypoints. You have algorithm to set collection of waypoints to your character, and render him (updating from the main gaming loop), and character reaches one waypoint after another by shifting them from the collection.
Working with tweens, append them (so there will be queue).
In both options, you can set new path for the character, all you need is simple logic to approximate current position of the character to the closest grid point, and calculate new path from there, It's very easy with basic grid systems, like:
closestGridCellX = Math.round(this.x / gridCellSize);
closestGridCellY = Math.round(this.y / gridCellSize);
With the help of waveformjs.org I am able to draw waveform for a mp3 file. I can also use
wav2json to get json data for audio file hosted on my own server and I don't have to depend on soundcloud for that. So far so good. Now, the next challenges for me are
To fill the color in waveform as the audio playing progresses.
On clicking anywhere on waveform audio should start playing from that point.
Has anyone done similar? I tried to look into soundcloud js SDK but no success. Any pointers in this directions will be appreciated, thanks.
As to changing the color my earlier answer here may help:
Soundcloud modify the waveform color
As to moving the position when you click on the waveform you can do something like this:
Assuming you have a x position already from the click event adjusted relative to the canvas.
/// get a representation of x relative to what the waveform represents:
var pos = (x - waveFormX) / waveformWidth;
/// To convert this to time, simply multiply this factor with duration which
/// is in seconds:
audio.currentTime = audio.duration * pos;
Hope this helps!
Update
The requestAnimationFrame is optimized not only for performance but also power consumption as more and more users are on mobile devices. For this reason the browsers may or may not pause or reduce frame rate of rAF when in a different tab or when browser tab is invisible. This can cause a position based approach to render the waveform delayed or not at all when tab is switched.
I would recommend to always use a time based approach so neither FPS or other behavior will interrupt the drawing of the waveform.
You can force the waveform to be updated at the actual current time as luckily we can attach this to the currentTime property of the audio element.
In the rAF loop simply update the position like this using a "reversed" formula of the above:
pos = audio.currentTime / audio.duration * waveformWidth + waveformX
When the tab becomes visible again this approach will make sure the waveform continues based on the actual time position of the audio.
Sorry by this dummy question! :D
I´m trying to make a clickable map with html5 canvas element, I find this good example: http://www.rubydesigner.com/blog/click-map-using-html5-canvas
But when a download it (CTRL+S) from Chrome it doesnt work. It download the html page and files folder with the JS a images, I checked the path to the images, but still the map doesnt appear. What is the problem?
UPDATE
Initial assumption about CORS turns out to not be the case here.
The code seemed to work in Chrome and although CORS typically is the cause when downloading files and using canvas with local (file://) file references. As localhost is used here via XAMMP this won't be the cause and it turns out there are more than one bugs in the online code.
Specifically the way it calculates the coordinates for the mouse:
var datapos = ((e.offsetY-2) * 300 * 4) + ((e.offsetX-1) * 4);
This will result in a NaN value due to offsetX/Y which of course cannot be used for any index.
The more appropriate way is something like this, here also compensating for canvas offset:
var rect = map_wrapper.getBoundingClientRect();
var datapos = ((e.clientY - (rect.top |0)) * 300 * 4) +
((e.clientX - (rect.left|0)) * 4);
However, I have never came across a floating point position for an element which seem to be case here (rect.top shows a float value in my browser, another little surprise) and therefor I am forcing the value to integer here (normally not necessarily.. I didn't dig deep into this). As debugging the whole code is a bit out of the scope here I will leave it with that and to OP to locate other bugs.
Correcting the position will at least give a usable index for the pixel array which in turn will return a valid (not necessarily correct it turns out, which leave checking of image, tolerane in case gamma/color correction is applied....) value for the red component (still issues when testing but as said, it's a bit out of the scope to do a full debug and correction).
Hopefully this can lead you to where the other errors are. I did not go through the html etc.
I could really need some help here. I'm trying to create a simple image-fliping-app that looks something like this: http://www.skistar.com/sv/Are/Skidskola/Skistar-Experience/om/
My app, just like this one, loads it's images dynamically (using XML). My app will only contain 4 fliping objects (i.e. 8 images).
Has anybody some guidance or code for that matter that I can study to get this working?
That would be really sweet! :-)
// Nicke
img.scaleX = -1;
img.scaleY = -1;
you can fake the flipping with a simple scaleX scaling. Basically you've got the two images on top of each other and when the mouse is over them you scale down the visible one and when it's scaleX value equals 0, you start scaling up the other image. The reference point of the images should be centered.
I will try to give you an example but a bit busy at the moment.
Hope it helps,
Rob