I tried adding my own methods to the Tween class to pause/resume all tweens. This is what I have:
createjs.Tween.pauseAllTweens = function()
{
for ( var i = 0, tweenObj; tweenObj = createjs.Tween._tweens[i++]; )
tweenObj.setPaused(true);
};
createjs.Tween.resumeAllTweens = function()
{
for ( var i = 0, tweenObj; tweenObj = createjs.Tween._tweens[i++]; )
tweenObj.setPaused(false);
};
But I'm not getting the expected results. Can anyone clue me on how to pause all tweens, then resume them without having to pause the Ticker?
There is a simpler way to pause all of the tweens when using TweenJS from CreateJS ...
createjs.Ticker.paused = true; // pauses every tween
createjs.Ticker.paused = false; // un-pauses/resumes all of the tweens
Setting a tween to paused will remove it from the _tweens array. You are better off storing the tweens you create in your own array, and pause/resuming them there.
An approach that would work would be to iterate the _tweens array in reverse when you pause them, and store the tweens temporarily, so you can resume them later.
Ahh, yes... that helped me. Here is what I did:
var pausedTweenObjs = [];
createjs.Tween.pauseAllTweens = function()
{
var i = 0,
tweenObjs = createjs.Tween._tweens.slice().reverse(),
tweenObj;
for ( ; tweenObj = tweenObjs[i++]; )
{
pausedTweenObjs.push(tweenObj);
tweenObj.setPaused(true);
}
};
createjs.Tween.resumeAllTweens = function()
{
var i = 0, tweenObj;
for ( ; tweenObj = pausedTweenObjs[i++]; )
tweenObj.setPaused(false);
pausedTweenObjs.length = 0;
};
Related
Coming from this Question Tweening Colors on Spark AR via Script i now try to make start and end color dynamically bounded. I propably havn't swallowed the whole concept of reactive programming yet, but i tried to make a factory so the value is a function... yet its not working, or only with the initial values. Using the set function and restarting animation doesnt change a thing. What am i missing? Thank you and best regards!
const pink = [.99, .682, .721, 1];
const blue = [.0094, .0092, .501, 1];
const yellow = [0.9372, .7725, 0, 1];
function ColorFactory() {
this.sourceCol = pink;
this.targetCol = blue;
this.set = function (_col1, _col2) {
this.sourceCol = _col1;
this.targetCol = _col2;
}
this.get = function (id) {
switch (id) {
case 'source': return this.sourceCol;
default: return this.targetCol;
}
}
}
var colfac = new ColorFactory();
const timeDriver = Animation.timeDriver(timeDriverParameters);
const rotSampler = Animation.samplers.easeInQuad(0, 35);
const alphaSampler = Animation.samplers.linear(1, 0);
const colSampler = Animation.samplers.linear(colfac.get('source'), colfac.get('target'));
const colorAnimation = Animation.animate(timeDriver, colSampler);
timedriver.start();
//doesnt make change anything, same colors as before:
colfac.set(blue, yellow);
timedriver.reset();
timedriver.start();
So how could i make the set of colors dynamic? Anyone?
The only "good" option for you is to do something like this:
const colors = [];
const driver = A.timeDriver({ durationMilliseconds : 1000 });
// On NativeUI monitor selected index event
ui.selectedIndex.monitor.subscribe(
(val) => {
const sampler = A.samplers.linear(colors[val.oldValue, colors[val.newValue]);
const colorAnimation = A.animate(driver, sampler);
// bind here to shader
})
Has anyone used this component with Vue?
https://www.npmjs.com/package/aframe-draw-component.
I want to use Advanced Usage with “aframe-draw-component”.
it works with raw html but not vue.js. codepen example
// html
<a-scene fog="type: exponential; color:#000">
<a-sky acanvas rotation="-5 -10 0"></a-sky>
</a-scene>
// js
const chars = 'ABCDEFGHIJKLMNOPQRWXYZ'.split('')
const font_size = 8
AFRAME.registerComponent("acanvas", {
dependencies: ["draw"],
init: function(){
console.log(this.el.components)
this.draw = this.el.components.draw // get access to the draw component
this.draw.canvas.width = '512'
this.draw.canvas.height = '512'
this.cnvs = this.draw.canvas
const columns = this.cnvs.width / font_size
this.drops = []
for (let x = 0; x < columns; x++) {
this.drops[x] = 1
}
this.ctx = this.draw.ctx
},
tick: function() {
this.ctx.fillStyle = 'rgba(0,0,0,0.05)'
this.ctx.fillRect(0, 0, this.cnvs.width, this.cnvs.height)
this.ctx.fillStyle = '#0F0'
this.ctx.font = font_size + 'px helvetica'
for(let i = 0; i < this.drops.length; i++) {
const txt = chars[Math.floor(Math.random() * chars.length)]
this.ctx.fillText(txt, i * font_size, this.drops[i] * font_size)
if(this.drops[i] * font_size > this.cnvs.height && Math.random() > 0.975) {
this.drops[i] = 0 // back to the top!
}
this.drops[i] = this.drops[i] + 1
}
this.draw.render()
}
})
No matter where I put in Vue component, I get this error:
App.vue?b405:124 Uncaught (in promise) TypeError: Cannot read property ‘canvas’ of undefined
at NewComponent.init (eval at
It can’t find the custom dependency “draw”.
Can somebody help me ?
Thanks.
The canvas element is at Your disposal in the el.components.draw.canvas reference.
You can either create Your standalone vue script, or attach it to an existing component like this:
AFRAME.registerComponent("vue-draw", {
init: function() {
const vm = new Vue({
el: 'a-plane',
mounted: function() {
setTimeout(function() {
var draw = document.querySelector('a-plane').components.draw; /
var ctx = draw.ctx;
var canvas = draw.canvas;
ctx.fillStyle = 'red';
ctx.fillRect(68, 68, 120, 120);
draw.render();
}, 100)
}
});
}
})
Working fiddle: https://jsfiddle.net/6bado2q2/2/
Basically, I just accessed the canvas, and told it to draw a rectangle.
Please keep in mind, that Your error may persist when You try to access the canvas before the draw component managed to create it.
My no-brainer solution was just a timeout. Since the scene loads, and starts rendering faster, than the canvas is being made, I would suggest making a interval checking if the canvas element is defined somehow, and then fire the vue.js script.Also keep in mind, that You can work on existing canvas elements with the build in canvas texture: https://aframe.io/docs/0.6.0/components/material.html
Hi I'm creating a basic game and I need the most simple "PAUSE" menu in the world!!! I am using this:
pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {this.game.paused = true;},this);
game.input.onDown.add(function () {if(this.game.paused)this.game.paused = false;},this);
pauseButton.fixedToCamera = true;
I just want to see "Game Paused" when the pause button is pressed that's all! please just tell me the most simple code that will display "game paused" when i click on pause.
Thank you in advance!
Something along the lines of this:
var text;
var pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {
this.game.paused = true;
var style = {fill : '#FFF'};
text = game.add.text(game.width * 0.5, game.height * 0.5, "Game Over!", style);
text.anchor.set(0.5, 0.5);
}, this);
game.input.onDown.add(function () {
if (this.game.paused) {
this.game.paused = false;
text.destroy();
}
}, this);
pauseButton.fixedToCamera = true;
Added it right in your code, you may want to adjust what is a local variable and what is a field. You can include text properties in the style variable or you can set them later on via text.font, text.fontSize and so on, see the API documentation.
Is it possible to add mouse events to a shape mask? I have the mask working, and have animated it in other tests. But now I want to know if masks can be clicked and dragged.
You can see the example here: http://www.webnamehere.com/mask/mask.html
And although Easeljs never never seems to work in jsFiddle, you can also see the code here: http://jsfiddle.net/8kbu3/1/
var circle = new createjs.Shape();
var Galaxy;
$(document).ready(function() {
canvasWidth = "1024px";
canvasHeight = "768px";
stage = new createjs.Stage('demoCanvas');
createjs.Touch.enable(stage);
$("#demoCanvas").attr({width:canvasWidth, height:canvasHeight});
Galaxy = new Image();
Galaxy.src = "images/galaxy.jpg";
Galaxy.onload = handleImageLoad;
function handleImageLoad() {
GalaxyBitmap = new createjs.Bitmap(Galaxy);
GalaxyBitmap.x = 0;
GalaxyBitmap.y = 0;
containerGalaxy = new createjs.Container();
containerGalaxy.addChild(GalaxyBitmap);
containerGalaxy.x = 0;
containerGalaxy.y = 0;
circle = new createjs.Shape();
circle.graphics.beginFill('blue').drawCircle(80,80,50).endFill();
containerGalaxy.mask = circle;
stage.addChild(containerGalaxy);
stage.update();
}
circle.onClick = function(evt){
alert('what the F?');
}
circle.onPress = function(evt){
var offset = {x:circle.x-evt.stageX, y:circle.y-evt.stageY};
evt.onMouseMove = function(ev) {
circle.x = ev.stageX+offset.x;
circle.y = ev.stageY+offset.y;
console.log("circle X: " + circle.x + " | Y: " + circle.y);
stage.update();
}
}
Thanks guys
To receive an click-event you have to add the circle to the stage (stage.addChild(circle)) or to a child of the stage, even if it acts as a mask - in your case it might be better to take a transparent dummy-object as the click-listener.
I am trying to add views to my scroll view when it reaches 40% scroll. This is the way I am doing it :
scrollView.add(//add first 10 initial containerView's);
var triggerScroll = true;
var scrollPercentage = 0;
scrollView.addEventListener('scroll', function(e) {
var devHeight = Ti.Platform.displayCaps.platformHeight;
var currPos = scrollView.contentOffset.y;
if(currPos > devHeight){
currPos = currPos - devHeight;
}
scrollPercentage = (currPos)/devHeight * 100;
if(scrollPercentage > 40 && triggerScroll){
triggerScroll = false;
var containerView = myapp.createMyView();
scrollView.add(containerView);
}
//reset scroll to true after the offset reaches end of the screen, so that the
//'scroll' event listener only gets called ONCE every time it crosses 40%
if(scrollPercentage > 101){
triggerScroll = true;
}
});
But its just not working. I am trying to support infinite scroll in my vertical scroll view. Any idea whats going wrong ?
I use the module below when working with infinite scrolling. It use a TableView, but I would think you can apply it to a ScrollView as well. You need to pass in a function that will be called when the TableView register that more content should be loaded.
When you have finished loading you must call the loadingDone-function in order to enable the TableView to initiate another loading sequence.
The value m_bNoDataFound ensure that the loading sequence is not initiated, when there is no more data to fill into the list.
You can alter the offsets (currently 0.75 for Android and 0.90 for iOS) if want the loading sequence to be initiated sooner or later during scroll.
function TableView( onLoad ) {
var isAndroid = Ti.Platform.osname === 'android' ? true : false;
var m_bNoDataFound = false;
var m_nLastDistance = 0;
var m_bPulling = false;
var m_bLoading = false;
var table = Ti.UI.createTableView( {
height : Ti.UI.FILL
} );
table.addEventListener( 'scroll', function( evt ) {
//Scroll to load more data
if( !m_bNoDataFound ) {
if( isAndroid ) {
if( !m_bLoading && ( evt.firstVisibleItem + evt.visibleItemCount ) >= ( evt.totalItemCount * 0.75 ) ) {
onLoad( true );
m_bLoading = true;
}
}
else {
var nTotal = evt.contentOffset.y + evt.size.height;
var nEnd = evt.contentSize.height;
var nDistance = nEnd - nTotal;
if( nDistance < m_nLastDistance ) {
var nNearEnd = nEnd * 0.90;
if( !m_bLoading && ( nTotal >= nNearEnd ) ) {
onLoad( true );
m_bLoading = true;
}
}
m_nLastDistance = nDistance;
}
}
} );
function m_fLoadingDone( a_bNoDataFound ) {
m_bNoDataFound = a_bNoDataFound;
if( m_bLoading )
setTimeout( function( ) {
m_bLoading = false;
}, 250 );
}
return {
table : table,
loadingDone : m_fLoadingDone
};
};
module.exports = TableView;
When integrating an infinite scroll within a scrollview, there are some important things you have to consider:
1. scroll event is triggered a lot: try to throttle your scroll event callback using underscoreJS.
Throttle creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with. See the underscorejs documentation for more.
2. Default and system units on Android vs iOS: The size of a view on Android uses a different display unit than coordinates of a view. This mismatch in units will cause incorrect calculation of your trigger for the infinite scroll. To solve this, you have to get and set the default unit yourself. The solution can be found in this widget (see getDefaultUnit()): https://github.com/FokkeZB/nl.fokkezb.color/blob/master/controllers/widget.js
3. The ti-infini-scroll can help you with this: this library creates a wrapper around the default Titanium ScrollView. This wrapper contains the calculation of the end of scroll (your trigger for updating/getting new data). When using this library, don't forget to implement bullet number 2.
https://github.com/goodybag/ti-infini-scroll