Develop Reference

Phaser Tilemaps

I have tried the code below and the tileset doesn't load.
this.game.physics.startSystem(Phaser.Physics.ARCADE);
map = game.add.tilemap('tilemap');
map.addTilesetImage('floor', 'tiles');
layer = map.createLayer('GroundLayer');
layer.resizeWorld();

I found this code worked
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.map = game.add.tilemap('tilemap');
this.map.addTilesetImage('floor', 'floor');
this.layer = this.map.createLayer('GroundLayer');
game.physics.enable(this.map, Phaser.Physics.ARCADE);
this.map.setCollisionBetween(0, 1, true, "GroundLayer");
this.layer.resizeWorld();

How to include typeface.json font file in three.js?

I want to add 3D text in my website using the code (according to Labelling the vertices in AxisHelper of THREE.js ) below:
var textGeo = new THREE.TextGeometry('Test', {
size: 10,
height: 5,
curveSegments: 6,
font: "helvetiker",
style: "normal"});
var color = new THREE.Color();
color.setRGB(255, 250, 250);
var textMaterial = new THREE.MeshBasicMaterial({ color: color });
var text = new THREE.Mesh(textGeo , textMaterial);
scene.add(text);
This requires including helvetiker_regular.typeface.js font file before using text Geometry as Three.js needs it for loading text geomtery.
What I find is json file such as "helvetiker_regular.typeface.json" (https://github.com/mrdoob/three.js/tree/master/examples/fonts).
Just a rookie in JS programing.
Can someone tell me how to include it to make my code work?

You'll need to use a font loader to load the font first:
var fontLoader = new THREE.FontLoader();
fontLoader.load("../path/to/font.json",function(tex){
var textGeo = new THREE.TextGeometry('Test', {
size: 10,
height: 5,
curveSegments: 6,
font: tex,
});
var color = new THREE.Color();
color.setRGB(255, 250, 250);
var textMaterial = new THREE.MeshBasicMaterial({ color: color });
var text = new THREE.Mesh(textGeo , textMaterial);
scene.add(text);
})
Something like that will work if you just want to load it once and dont care about keeping the texture for another time. If you need to keep the "tex" object you could preload it somewhere in the code, and have it accessible for all future textgeometry objects..

Make kineticjs use existing canvas

I am attempting to use kinetic.js with an existing canvas. The problem is that the kinetic.js API requires that you specify the id of the container element and then kinetic.js creates a Kinetic.Stage (which creates and uses its own canvas).
For instance:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);
</script>
I want to be able to use an existing canvas element with kinetic.js instead of it creating its own. Is this possible?
A similar question has been asked before, however it doesn't seem to provide a correct answer.
Any ideas? Thanks!

An html canvas is just a bunch of pixels.
You can convert those pixels into an image and then use that image as the source for a Kinetic.Image.
// create an image from the existing canvas
var canvas2Image=new Image();
canvas2Image.onload=function(){
// create a Kinetic.Image using that image
var kImage=new Kinetic.Image({
x:0,
y:0,
width:canvas2Image.width,
height:canvas2Image.height,
image:canvas2Image
});
}
canvas2Image.src=canvas.toDataURL();

creating overlay and removing parts of it on canvas using kineticjs

In a canvas painting application I want to add feature to create overlay over the whole canvas and then when I make a particular rectangle on the canvas the overlay should get removed from that region ,exactly like one on https://onpaste.com/ (select focus tool) . What I have thought is that if a rectangle is made on the canvas , then I can crop the current image and then paste the image on the canvas again over the overlay at the place which was selected . I am not sure , how to crop the image before pasting it on the canvas , I tried to use method setFillPaternImage of Kinetic.Image object ,but here I want to feed Kinetic.Image object instead of javascript image object because on Kinetic.Image object I can use setAttrs method .
Please tell how I can crop and add the image or if there is a better way to achieve the same . Link to fiddle -> http://jsfiddle.net/hearsid/9a2Hn/
<html>
<head>
<style>
</style>
</head>
<body>
<div id="container"></div>
<button id="button">this</button>
<script src="js/jquery.js"></script>
<script src="js/kinetic.js"></script>
<script>
var stage = new Kinetic.Stage({
container:'container',
width:500,
height:300
});
var layer=new Kinetic.Layer();
var img = new Image();
img.onload = function() {
imgObj = new Kinetic.Image({
x:0,y:0,width:400,height:300,image:img
});
layer.add(imgObj);
var circle = new Kinetic.Circle({
x:30,y:30,radius:30,fill:'red'
});
layer.add(circle);
var rect = new Kinetic.Rect({
x:0,y:0,width:300,height:500,fill:'gray',opacity:0.5
});
layer.add(rect);
stage.add(layer);
}
img.src="some.jpg";
$("#button").click(function() {
rect2 = new Kinetic.Rect({
x:200,y:30,width:100,height:100
});
/*
Careful with the commented area , here I wanted to crop the image before using FillPaternImage
var img2 = new Image();
img2.onload = function() {
imgObj2 = new Kinetic.Image({
image: img2 ,
x:300
});
imgObj2 = imgObj.clone();
imgObj2.setAttrs({image :img2 ,x:100 , y:0 });
*/
img2 = img ;
rect2.setFillPatternImage(img2);
layer.add(rect2);
layer.draw();
});
</script>
</body>
</html>

Your "clipped reveal" can be accomplished like this:
A Demo: http://jsfiddle.net/m1erickson/qXHAJ/
In a bottom layer:
Add an image.
Add a semi-transparent Rect to "frost" the bottom image.
In an overlay layer:
Add a group to a top overlay layer.
Set the clip property of the group to the area you want revealed.
In the group:
Add the image again (this second image will be "revealed" only in the groups clip area).
Add a draggable Rect to act as your "view"
(the Rect will have its X/Y/width/height set to the groups clip area.
When the user drags the Rect:
Change the group's clipping area to the Rect's X/Y.
The Rect will act as a draggable indicator of where the reveal should be.
The result is that the image is "frosted" everywhere except the draggable Rect.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/qXHAJ/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
var frostlayer=new Kinetic.Layer();
stage.add(layer);
stage.add(frostlayer);
var view;
var img=new Image();
img.onload=function(){
start();
}
//img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
img.src="KoolAidMan.png";
function start(){
var image=new Kinetic.Image({
image:img,
x:0,
y:0,
width:300,
height:300
});
layer.add(image);
var frost=new Kinetic.Rect({
x:0,
y:0,
width:300,
height:300,
fill:"white",
opacity:0.70
});
layer.add(frost);
var viewport=new Kinetic.Group({
x:0,
y:0,
width:300,
height:300,
clip:[30,30,100,100]
});
frostlayer.add(viewport);
unfrosted=new Kinetic.Image({
image:img,
x:0,
y:0,
width:300,
height:300
});
viewport.add(unfrosted);
view=new Kinetic.Rect({
x:30,
y:30,
width:100,
height:100,
strokeWidth:3,
stroke:"purple",
draggable:true
});
view.on("dragmove",function(){
viewport.setClip(this.getX(),this.getY(),100,100);
});
viewport.add(view);
layer.draw();
frostlayer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<h3>Drag the unfrosted Rect</h3>
<div id="container"></div>
</body>
</html>

Preload a Google Maps overlay

I'm trying to use a Google Map as a background, with a fixed overlay. Have a look-see.
You can see the problem — whilst it's loading, the text is unreadable. The overlay is loaded by Google's JS. How can I hide the map until the overlay has loaded? (Or a better solution?)

Actually, you can use JavaScript to make sure the map only displays when the overlay is loaded:
document.observe('dom:loaded', function()
{
if (GBrowserIsCompatible()) {
var overlaySrc = 'img/contact_map_overlay.png';
var preloadOverlay = new Image();
preloadOverlay.onload = function() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-33.82568, 151.2180955505371), 14, G_PHYSICAL_MAP);
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(80, 250));
map.addControl(new GSmallMapControl(), topRight);
var mapTarget = new GScreenOverlay(overlaySrc, new GScreenPoint(0.0, 0.0, 'fraction', 'fraction'), // screenXY
new GScreenPoint(0, 0), // overlayXY
new GScreenSize(1, 1, 'fraction', 'fraction') // size on screen
);
map.addOverlay(mapTarget);
var pin = new GIcon(G_DEFAULT_ICON);
pin.image = "img/pin.png";
pin.shadow = "no-shadow";
pin.iconSize = new GSize(34, 43);
markerOptions = {
icon: pin
};
var marker = new GMarker(new GLatLng(-33.82568, 151.240635), markerOptions);
map.addOverlay(marker);
}
preloadOverlay.src = overlaySrc;
}
});
Google simply displays the image from the server, so having it loaded into the cache before displaying the map will solve your problem.

I don't see any way in the v2 Api to either know when the overlay has loaded, or hide the map until it finishes the overlay.
The load() event fires before the overlays have finished loading. I notice the overlay is quite large at 684KB. A smaller overlay loads quicker.
You might also consider just putting a background image or something behind the contact us text which is being obscured (granted for only 5 seconds).