I'm following this tutorial (http://www.yeahbutisitflash.com/?p=5226), using Chrome, and can't figure out why this isn't working. Here is my console output:
init() successfully called.
pixi.dev.js:224 Pixi.js v2.2.7 - webGL http://www.pixijs.com/ ♥♥♥
index2.html:26 PIXI.WebGLRenderer
index2.html:28 render complete.
And here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Endless Runner Game Demo</title>
</head>
<body onload="init();">
<div align="center">
<canvas id="game-canvas" width="512" height="384"></canvas>
</div>
<script src="js/pixi.js-master/bin/pixi.dev.js"></script>
<script>
function init() {
console.log("init() successfully called.");
stage = new PIXI.Stage(0x66FF99);
renderer = PIXI.autoDetectRenderer(
512,
384,
document.getElementById("game-canvas")
);
console.log(renderer);
renderer.render(stage);
console.log("render complete.");
}
</script>
</body>
</html>
Yet, it displays nothing. The tutorial says I should see the background color set on the stage at this point.
Thanks.
The third argument of PIXI.autoDetectRenderer should be an Object, not an element. You should set the Object property "view" to be your canvas element.
var renderer = PIXI.autoDetectRenderer( 512, 384, {
view: document.getElementById("game-canvas")
});
Also note that you may need to run a local server in order to view it in Chrome.
Related
I am new at learning coding and game development. I have attempted to make a HTML5 simple game based off my online instructor's. Looking though my html coding, I believe it is exactly how my instructor did it. Problem is that I cannot seem to find my sprite.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Tico's Flight</title>
<script type="text/javascript" src="simpleGame.js"></script>
<script type="text/javascript">
var scene;
var bird;
function init() {
scene = new Scene();
bird = new Sprite(scene, "birdgame.png", 50, 50);
bird.setAngle(270);
bird.setSpeed(0);
scene.start();
}
function update() {
scene.clear();
if (keyDown[K_UP]) {
bird.setSpeedBy(1);
}
if (keyDown[K_DOWN]) {
bird.changeSpeedBy(-1);
}
if (keyDown[K_LEFT]) {
bird.changeAngleBy(-5);
}
if (keyDown[K_RIGHT]) {
bird.changeAngleBy(5);
}
bird.update();
}
</script>
</head>
<body onload="init()">
<center>
<h1>Fly Tico!</h1>
</body>
</html>
I figured it out! Something simple, as I am learning it usually is: I typed "keyDown" instead of "keysDown". Got my bird visible and flying around.
I am trying (and failing) miserably with Easel JS and Canvas. I'm a bit new to canvas in general and learning JS as well. I am basically trying to make a canvas that I can update with colors, that are passed through a button click.
I have made a Fiddle to show my work so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>IllustratorSetup</title>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
stage.addChild(rect);
stage.update();
}
function drawShapes(){
drawRectangle();
stage.update();
}
</script>
</head>
<body onload="drawShapes()">
<canvas id="canvas" width="500" height="300"></canvas>
<button onclick="drawRectangle('#ff0000')">Click me for red</button>
</body>
</html>
Your demo likely doesn't work because you are defining your stage before the body onload, and passing it the ID of your canvas (which uses a document.getElementById under the hood). The canvas element won't be available until it is created in the body.
I recommend moving your code that isn't in a function to an init(), or even put it into the drawShapes method.
var stage, circle; // Keep them global
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
stage.addChild(rect);
//stage.update(); // Unnecessary, since it is called in drawShapes.
}
function drawShapes(){
stage = new createjs.Stage("canvas");
circle = new createjs.Shape();
drawRectangle();
stage.update();
}
You can also define your scripts in the body, after the canvas element, so that they initialize after the element is ready.
Note that your fiddle doesn't have the createjs libraries in it, and that JSFiddle will fire the code part of the fiddle during the onload event, so you may not see the issue you are having locally.
I'm using Google Earth in Web-development but I'm facing a weird situation, this is a simple code from the google code playground and it loads a 3D model into a google earth, if I refresh the page it wont load the model again,
http://savedbythegoog.appspot.com/?id=7f8638b214605a2327af223c613a6ae13874416b
Is there any way to fix it.
I'm facing with one more problem of loading the 3D models in Internet Explorer 8 in 32 bit XP machine, IE8 doesn't load the 3d model in google earth, you can check the link given. I'm also posting the js code below.
Please Help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
function addSampleButton(caption, clickHandler) {
var btn = document.createElement('input');
btn.type = 'button';
btn.value = caption;
if (btn.attachEvent)
btn.attachEvent('onclick', clickHandler);
else
btn.addEventListener('click', clickHandler, false);
// add the button to the Sample UI
document.getElementById('sample-ui').appendChild(btn);
}
function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}
</script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
// addSampleButton('Create a 3D Model!', buttonClick);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
la.setRange(100000);
ge.getView().setAbstractView(la);
create3dModel();
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function create3dModel() {
// Create a 3D model, initialize it from a Collada file, and place it
// in the world.
var placemark = ge.createPlacemark('');
placemark.setName('model');
var model = ge.createModel('');
ge.getFeatures().appendChild(placemark);
var loc = ge.createLocation('');
model.setLocation(loc);
var link = ge.createLink('');
// A textured model created in Sketchup and exported as Collada.
link.setHref('http://earth-api-samples.googlecode.com/svn/trunk/examples/' +
'static/splotchy_box.dae');
model.setLink(link);
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
loc.setLatitude(la.getLatitude());
loc.setLongitude(la.getLongitude());
placemark.setGeometry(model);
la.setRange(300);
la.setTilt(45);
ge.getView().setAbstractView(la);
}
function buttonClick() {
create3dModel();
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="sample-ui"></div>
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
If that links doesn't work copy the code and paste it in a text file and rename it to .html and then execute it.
Even I had faced the same problem with collada models and internet explorer, the code u have given is working fine in rest of the browsers like chrome and mozilla.
check out this link, but in this case they are loading a kml file and not directly loading collada models into the browser using javascript.
Easeljs - Hyperlinking.
Out of an easeljs script: how can I hyperlink to another web site?
For instance: when an onClickEvent occurs another window would open - in my case I want to send a variable, an ID to another page with an SQL request on the ID for more details.
Any sample would be great.
When you click on the red shape it will open google.com. You can add the hyperlink any easeljs object like this.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
#myCanvas{
background-color:#CCC;
}
</style>
<script src="easeljs-0.7.1.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script>
var canvas, stage;
$().ready(function(e) {
canvas = document.getElementById("myCanvas");
stage = new createjs.Stage(canvas);
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);
stage.addChild(shape);
shape.x = 200, shape.y = 100;
shape.addEventListener("click", goURL, false);
stage.update();
});
function goURL(){
window.open("http://google.com");
}
</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="500" height="400">
</canvas>
</body>
</html>
http://www.w3schools.com/jsref/met_win_open.asp
window.open(URL,name,specs,replace);
But be aware that popups/new tabs like this might be blocked by the browser if not followed an user-event. You could also retrieve the details via jQuery.get or jQuery.ajax ect.. and then display the information directly in your application.
You can also use window.location in case you only want to redirect to another page instead of open a new window/tab. For example:
var id = 0 //the variable you want to pass;
shape.addEventListener("click", gotoURL);
function gotoURL(){
location.assign( 'http://yoursite.com/search?id='+id );
}
Why is this little script not working?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="can" height="500" width="500"></canvas>
<script type="text/javascript">
var image = new Image().src="1.jpg";
context = document.getElementById("can").getContext("2d");
context.drawImage(image,10,10,480,480);
</script>
</body>
</html>
Firebug in Firefox (latest Version) shows:
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
[Bei diesem Fehler anhalten]
context.drawImage(image,10,10,480,480);
Chrome can't show the image either, they just say ERROR.
image.src is async, you need to draw it with a callback.
var image = new Image;
image.onload = function() { context.drawImage(image, 10, 10, 400, 400); }
image.src = .....
All you need to do is change:
ctx.drawImage(i, 0, 0, arg.width, arg.height);
to:
ctx.drawImage(arg.img, 0, 0, arg.width, arg.height);