I'm working a project using phaser. They want to play video (youtube, or another source) in the website. Can phaser do that ? I already search but not found anything.
For a Phaser version-agnostic solution, keep in mind that Phaser lives in an HTML page and uses JavaScript.
An easy way to handle working with other HTML in your game is to add a container div in the same page that includes the game and then use JavaScript to dynamically populate and/or load/display that container.
Since you didn't provide any code for us to work with, some starter code that you would need to customize and expand upon for your needs is below.
<body>
<!-- Phaser game would need to be loaded passing this div's id -->
<div id="gameDiv"></div>
<!-- Video -->
<div id="videoContainer">/* CSS by default would set visibility to hidden and absolute positioning over the game */
<!-- depending upon how many videos there are, if it's a static video element it could just be added here, or would be empty and populated via JavaScript -->
</div>
</body>
Then within your game have it toggle the visibility of the video container.
function playVideo() {
var el = document.getElementById("videoContainer");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
window.scrollTo(0, 0);
}
This function could be expanded upon to clear the contents of the div#videoContainer and add another video dynamically, have the video start, toggle the visibility of a different container, etcetera.
Josh Morony's Creating a Shop with Purchasable Items in a Phaser Game has a good overview of how to do this, and is what I borrowed from for pieces of the above.
Related
Placing multiple swiffy conversions on the same page seems to conflict, only the first one shows up. Is there an area of code, possibly instance names, that I can change on each one so that multiple conversions can appear on the same page?
Here's a link to the page I'm talking about: http://www.ufonies.com/fansmobi.html
The animation in the header works fine, there should be another small animation under the "Space Golf" image but it just appears as a blank space, the conversion code there.
Thanks
I had this problem too with a slider - each slide was a swiffy animation and every time I used two or more animations, swiffy threw an error.
I got around this by using iframe containers for slides instead of divs - this way each animation had its own namespace for variables and scripts.
I hope this helps.
It's pretty simple actually
The swiffyobject should be renamed to anything ex. swiffyobject2, swiffyobject3 and so on.
See in this example the container is renamed to container2 so is the Element id
And then i call swiffyobject2 instead of swiffyobject. that way we can use as much instances of swiffyobjects as we want.
<div id="swiffycontainer2" style="width: 190px; height: 195px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer2'),
swiffyobject2);
stage.start();
</script>
I like to create separate js files for every object and just call one instance of
<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js"></script>
but that's just a personal taste. Hope this helps.
Try to make new instance.
Example:
var swiffyIntroSlide = new swiffy.Stage(document.getElementById('intro-slide'), introSlide);
swiffyIntroSlide.start();
var swiffyBanquePopulaire = new swiffy.Stage(document.getElementById('top-banner'), banquePopulaire);
swiffyBanquePopulaire.start();
Notes:
introSlide & banquePopulaire are variables of swiffy objects.
I have a ruby on rails web app, and in some views i have many heavy images( <img> ) to render .The <img> are generated in a Helper.
The problem is that the css is loaded first, then the js, then the heavy images , and then finally the css refereneced background images.
It takes quite a while for all of the heavy images to load, which therefore holds the whole site up.
I want to load first the css background images then load the other images, as they obviously hold visual structure of the page.
rails version: 2.3.8
EDIT:
Thank you guys, I apologize for not having shared the code earlier.
I have two models : Categories and Images, each Category has many images.
In the view i have a list of categories, which is generated by a helper :
categories.each do |cat|
html << "<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
end
and when I click on the category the images are displayed
categories_images.each do |i|
html << "<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"
end
I have css background image associated to the list of category
The problem is that the images (<img>) is displayed before the css background images of the list of categories.
We need to assume things because you haven't shared your code.
Coming to your query, for now you can preload images using jQuery:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
This saves the loading time of loading images.
Use a base64 string.
Example:
background-image: url(data:image/png;base64,*CONVERTED IMAGE DATA HERE*);
without: **
online converter: http://webcodertools.com/imagetobase64converter
note: I only would suggest this if the image size is not too heavy.
Solution: Do not use the img tag.
Create a sprite containing all your images. Load the sprite in your application.html layout once.
Use data uris to transmit the data directly in the html. See http://css-tricks.com/data-uris/
My approach is to lazy load the images using jquery and data- tags. This approach also allows me to choose different images based on device width and spare tablet/mobile users.
<img src="" data-src="/img/graphic-desktop.jpg" data-smallsrc="/img/graphic-smaller.jpg" alt="Graphics" class="lazy" />
<!-- the following would be in your js file -->
$lazy = $('img.lazy');
$(window).load(function(){
// window load will wait for all page elements to load, including css backgrounds
$lazy.each(function(){
// run thru each img.lazy on the page. spare the jquery calls by making $this a variable
$this = $(this);
// if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
});
});
I have been searching for an uncomplicated solution to how an image (png) can be zoomed in and out without affecting the rest of the website, but found none.
Have any of you used such a tool or know a way to do this using jQuery or javascript? I am very new to jQuery, so don't know what events I should look at. This functionality should work on both android tablets and iPad.
Looked at JQuery Mobile Pinch Zoom Image Only and the links provided but apparently those are for the ones using PhoneGap.
Thanks for any help.
I did not find a solution either so I implemented it myself (using vanilla JS and canvas but portable to css3) : https://github.com/rombdn/img-touch-canvas
Example : http://www.rombdn.com/img-touch-canvas/demo (better with a touch device but works on desktop with +/- and mouse drag)
<html>
<body>
<div style="width: your_image_width; height: your_image_height">
<canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
</div>
<script src="img-touch-canvas.js"></script>
<script>
var gesturableImg = new ImgTouchCanvas({
canvas: document.getElementById('mycanvas'),
path: "your image url"
});
</script>
</body>
</html>
I would place the image in a "viewport" layer that is used to maintain the flow of your page. The "viewport" element would have it's overflow CSS property set to hidden to achieve this goal.
You can then use JavaScript to detect multiple touches and then scale the image as necessary. I have yet to use this frameworks but it seems very cool and could help make this easier on you: https://github.com/HotStudio/touchy
You can also detect multiple touches without a framework by watching the event.touches array inside an event handler for touchmove. For each touch occurring simultaneously there will be another index in the event.touches array.
Using Touchy seems pretty easy (untested):
var handleTouchyPinch = function (e, $target, data) {
$target.css({'webkitTransform':'scale(' + data.scale + ',' + data.scale + ')'});
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);
var $page = el.parents('div[data-role="page"]:visible');
Being called on pageinit() is showing null for me. Does anyone know the appropriate handler to access elements height from JQM on? (As I need to run height() when the element is displayed)
Thanks.
If you want a reference to the currently displayed page in jQuery Mobile there is the $.mobile.activePage property. It stores a jQuery object of the current page.
So to get the height of the current <div data-role="page"> element you would do:
var the_height = $.mobile.activePage.height();
Or you could get the height of the <div data-role="content"> section:
var the_height = $.mobile.activePage.children('[data-role="content"]').height();
Here's a link to the page in the documentation about this (however there is almost no info for this property, you may still want to browse the page to see what jQuery Mobile has built-in): http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html
Hey I just found out that the actual issue here is that elements don't seem to have a height() until pageshow handler is called (which runs after pageinit)
so use that handler to run any events based on grabbing existing heights etc
I am launching a mobile site and I want it to have a loading icon while loading all the content and images.
Details:
I have several pages. I want when I click on it will load the pages (to other html page), but I don't want to show the page without fully loaded and I want to show loading animation while it loading all the content. Once, the content is fully loaded. then the loading animation have to hide.
How to do that?
You can make a large <div> at the beginning of the page, then hide it using Javascript in the load event or using an illegal <style> block at the end of the <body>.
You need to give a more specific question to get more specific (useful answers).
In the meantime here are some (hopefully useful) resources:
http://www.devcurry.com/2009/05/display-progress-bar-while-loading.html
http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html
http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm
http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/
This one may come particularly if it applies to your situation:
Showing a div while page is loading, hiding when its done
Good luck!
Any number of ways, but you will need javascript.
You are ready when all image assets have been loaded. Define full screen div that covers the whole page. In this div, show e.g. loading spinner animated gif and what ever text you want.
<html>
<head> .. </head>
<body>
<div id="loader"> .. </div>
<div id="content" style="display:none"> .. </div>
<script> .. </script>
</body>
</html>
On your script preload all images. This ensures that they are in cache when they are needed.
<script>
var loadc = 0;
function _preload(path) {
var image = new Image;
image.src = path;
image.addEventListener('load', function() {
loadc++;
if (loadc == images.count) {
$("#loader").hide();
$("#hide").show();
}
// update here progress counter on loading div
};
}
var images = [ '/image/some.png', '/foo/bar.png' ]
$(document).ready(function() {
for (var i = 0 ; i < images.length; i++) _preload(images[i]);
});
</script>
You need to define in images array all assets that you want to be ready when content div is shown, this includes stuff referred from CSS and DOM and possible dynamic DOM. You can use this same method for other assets, like audio and json.