在这里,我有一个非常简单的脚本.
stage = new createjs.Stage("myCanvas");
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0,0,40);
还有我的HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
<script src="mainScript.js"></script>
<script src="create.js"></script>
</head>
<body>
<canvas id="myCanvas" width=1000 height=500 ></canvas>
</body>
</html>
但它不起作用.我收到此错误:
"createjs未定义"
但在我的HTML中它链接到文件.还有什么可能导致这个吗？
我目前正在开展塔防游戏,我目前正在实施不同的塔.我正在寻找一种方法来设置预定义的值,如配置文件,我可以在构建时提取不同塔的不同值.
我一直在搜索,我遇到了一些看起来像这样的代码:
var building_attributes = {
"Wall" : {
Damage : 0 ,
RANGe : 0
speed : 0
bullet_speed : 0
life : 100 ,
Shield : 500 ,
cost : 5
}
};
如果我实现了这个,那我怎么能访问不同的值呢？或者也许有人在我的问题上有一个很好的解决方案.
所有答案都很有用.:)
使用画架我如何设置弧的endAngle动画
我试图通过自己创建属性pie.setMyAngle = 0.1; ,然后在勾选中增加它,但这不起作用
function init() {
var canvas = document.getElementById('easel');
var stage = new createjs.Stage(canvas);
var pie = new createjs.Shape();
pie.setMyAngle = 0.1;
pie.graphics.beginFill("rgba(255,255,255,1)").arc(75, 75, 75, 0, Math.PI * pie.setMyAngle, false).lineTo(75, 75).closePath();
stage.addChild(pie);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
pie.setMyAngle += 0.1; //not working
pie.x += 1
stage.update();
}
}
我试图预加载一组SVG对象并使用CreateJS/PreloadJS显示它们.到目前为止,我能够显示一个没有预加载的SVG对象,但是一旦我使用PreloadJS的LoadQueue,我就无法让我的样本工作.
有人知道我在做错了什么吗？谢谢!
http://jsfiddle.net/trudeo/05eqqp49/
使用Javascript
var imageManifest = [
{ id: "MySvgImage", src: "http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" }
];
var stage = new createjs.Stage(document.getElementById('gameCanvas'));
var assetQueue = new createjs.LoadQueue(true);
assetQueue.loadManifest(imageManifest);
assetQueue.on('complete', complete);
function complete(e) {
// DOESN'T WORK
var svgImage = new createjs.Bitmap(assetQueue.getResult('MySvgImage'));
stage.addChild(svgImage);
// WORKS
var svgImage2 = new createjs.Bitmap("http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/circles1.svg");
stage.addChild(svgImage2);
stage.update();
createjs.Ticker.setFPS(40);
createjs.Ticker.addListener(tick);
}
function tick() {
stage.update();
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<canvas id="gameCanvas" width="800" height="800"></canvas>
</body>
</html>
我的画布上有一个圆圈.鼠标位置是相对于画布计算的.我希望当鼠标距离它<= 100px时,圆圈会移动.开始移动的最小距离为100px,为0.5px/tick.它在20px距离处达到2px/tick.
到目前为止,当距离小于或等于100时,我移动圆圈 - (我正在使用画架库)
function handleTick() {
distance = calculateDistance(circle, mX, mY);
if (distance<=100) {
circle.x += 0.3;
stage.update();
}
}
我想要的是
function handleTick() {
distance = calculateDistance(circle, mX, mY);
if (distance<=100) {
circleSpeed = // equation that takes distance and outputs velocity px/tick.
circle.x += circleSpeed;
stage.update();
}
}
所以我认为这是一个数学问题并将其发布在数学交换上,但到目前为止还没有答案.我试过谷歌搜索几个主题,如:"如何得出一个关系的方程",因为我有域(100,20)和范围(0.5,2).什么功能可以与他们联系？
事情是我不擅长数学,这些数字甚至可能没有关系 - 我不确定我在这里寻找什么.
我应该写一个随机算法" circleSpeed = 2x + 5x;"并希望它做我想要的吗？或者有可能像我一样 - "我希望这些是最小值和最大值,现在我需要为它提出一个等式"？
向右方向的指针会很棒,因为到目前为止我在黑暗中拍摄.
我正在努力学习如何在我正在开发的游戏中播放声音.
我需要在动画后播放声音,但是当我尝试调用sound.play()时.
浏览器声明您只能使用人体手势播放声音？
任何人都有一些技巧在这里分享.谢谢.
添加============
我在移动设备上遇到了这个问题.
在这个例子中：
var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 100, 100);
stage.addChild(rect);
}
function drawShapes(){
drawRectangle();
stage.update();
}
drawShapes();
// Why does this call log null?
console.log(stage.getBounds());<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
<canvas id="testCanvas" width="600" height="150"></canvas>stage.getBounds();正在返回空值。为什么它返回null？根据docs，它应该返回一个表示舞台边界框尺寸的矩形对象。
如果这种用法不正确，那么获取对象尺寸的正确用法是什么？
我有一个使用 preloadJS 加载资产的游戏。我在使用 soundJS 的 iPad 上遇到了各种声音问题，但从测试看来，使用 howler.js 的音频播放得很好，所以我正在考虑在 iPad 上使用该库。
我的问题是，是否有一种方法可以使用预加载了 preloadJS 的 howler.js 访问和播放声音？
我的目标是使用 Tween 函数从 A 点到 B 点制作一条动画线。
我使用的绘图库是EaselJS，对于 Tweening 我使用TweenJS。
是否可以使用 moveTo 函数来制作从 A 点到 B 点的直线动画？
我当前的设置如下：
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
我的目标是使这条路径从 x100 y100 到 x0 y0 具有动画效果。
我已经使用以下方法尝试过此操作，但没有任何反应：
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
createjs.Tween.get(line).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);
什么都没发生。
但是，如果我使用它，我会按预期得到该行，但它不是动画的：
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);
这按预期画了一条线。
有没有办法将 lineTo 方法与我缺少的补间方法一起使用？我已经检查了 Easel 和 TweenJS 的文档，但找不到示例或任何关于如何执行此操作或这是否不可能的明确说明。 …
我正在尝试禁用补间继续。时钟已从屏幕上移除，但该功能仍然会触发。
我尝试在下面执行此操作，但在“计时器长度”结束后我仍然听到音频。
clockContainer.removeAllChildren();
self.stage.removeChild(mytweentodisable);
不知道如何重构它以阻止该功能继续运行。
mytweentodisable = createjs.Tween.get(clockHand, { loop: false }).to({ rotation: 360 }, TimerLength).call(function () {
//this will trigger the timer is up
if (gameIsRunning == true) {
createjs.Sound.stop();
gameIsRunning = false;
createjs.Sound.play("gameOver");
}
});