Search the Community
Showing results for tags 'CreateJS'.
-
Hello, apologize if my question is a little generic. I'm trying to move from createJS to PixiJS. In createJS, I usually create bitmap texts starting from .png images, where each image corresponds to a single char. Using texturePacker, I create a spriteSheet .png file and json data, in which each frame is a char. Then I can use the spritesheet object to create directly a bitmap text, like the example below: var data = { "images": [ "digit.png" ], "frames": [ [1, 1, 52, 58, 0, 0, -5], [1, 61, 38, 62, 0, 0, -3], [1, 125, 48, 68, 0, 0, 0], [1, 195, 44, 62, 0, 0, -3], [1, 259, 54, 64, 0, 0, -2], [1, 325, 52, 68, 0, 0, 0], [1, 395, 48, 57, 0, 0, -5], [1, 454, 50, 60, 0, 0, -4], [1, 516, 44, 58, 0, 0, -5], [1, 576, 48, 57, 0, 0, -6], [1, 635, 24, 32, 0, 0, -34] ], "animations": { "a": { "frames": [0] }, "b": { "frames": [1] }, "c": { "frames": [2] }, "d": { "frames": [3] }, "e": { "frames": [4] }, "f": { "frames": [5] }, "g": { "frames": [6] }, "1": { "frames": [7] }, "2": { "frames": [8] }, "!": { "frames": [9] }, "?": { "frames": [10] } } } var spriteSheet = new createjs.SpriteSheet(data); var bitmapText = new createjs.BitmapText("Hello World!", spriteSheet); This is the whole process (very easy). I was wondering if I can achieve something similar in Pixi.js where it seems that a .fnt file is required. -
Hello, based on the createjs drag and drop demo, I'm trying to make it so that the circle jumps to the position of the cursor/touch on mousedown. I managed to make the dragging work, but no idea how to make the circle jump to position. createjs.Touch.enable(stage); this.circle_mc.on("pressmove", function (evt) { var point = stage.globalToLocal(evt.stageX, evt.stageY) evt.currentTarget.x = point.x; evt.currentTarget.y = point.y; stage.update(); }); Can anyone help it do something like this? Update: Managed to get it to work using this code in animate: var _this = this; stage.on("stagemousedown", function (evt) { var point = stage.globalToLocal(evt.stageX, evt.stageY) _this.circle_mc.x = point.x; _this.circle_mc.y = point.y; var moveAround = stage.on("stagemousemove", function (evt) { var point = stage.globalToLocal(evt.stageX, evt.stageY) _this.circle_mc.x = point.x; _this.circle_mc.y = point.y; }); stage.on("stagemouseup", function (evt) { stage.off("stagemousemove", moveAround) }, null, true) }); -
In celebration of next week's 2018 Olympic Winter Games we developed a small collection of simple HTML5 winter sport themed games. Each game is designed to load fast and run on desktop and mobile browsers (keyboard, mouse, touch controllable). And yes, each game features CANADIAN athletes, because they are the best SLALOM HERO http://b10b.com/slalomhero/ Choose your hero and compete across three courses in the Winter Sports Slalom Event. Steer between the slalom gates and collect boosts to improve your time. Train your athlete for success. Will you win the gold medal? HOCKEY HERO http://b10b.com/hockeyhero/ Choose your hero and compete against three fierce opponents in the Ice Hockey event. Avoid the attacking players to approach the goal line. Once in front of the goal, time your shot to score! Can you win the gold medal? SKATING HERO http://b10b.com/skatinghero/ Choose your hero and compete across three programs in the Figure Skating event. Perform incredible jumps and fast spins as you time your moves to perfection. Will you land all your moves and be awarded all three gold medals? Technical: These games were developed with Haxe + awe6 + CreateJS and designed to run on any device at ~30fps. We used several old-school techniques to create the "3D" effects - segments for the slalom, parallax for the hockey, mode7 for the skating. Commercial: Designed primarily for a high profile kids portal all three games are also available to license (on a non-exclusive basis) from our website: http://b10b.com
-
Hi " Dogs " (400x712) is one touch easy to play html5 game inspired by an old flash game. Game Play: All the dogs need to follow the leader dog(highlighted dog) action to sit or walk. Touch the dog to make them sit or walk. If the leader sits, all the dogs have to sit and so. Get more score and bones time to get into the next level. you can play the game here
-
[SOLVED] We finally found out the culprit, I set the antialias to true in PixiJS while createJs didn't. My player reported that after turning off the antialias, it works better than the createJs. Hello everybody, my name is Draco. I am the creator of a web game called stabfish.io My game was built using createJS with Animate export plugin. Unsatisfied with the performance, recently I convert the whole game using PixiJS v5, with pixi-animate plugin. After revamping the game, the performance of the game on my computers has a significant boost. However, there are reports by 2-3 players that the performance has dropped after the update. I would like to know if you have any insight into what might be causing this. In case you guys interested to compare, these are the link: createjs: https://stabfish.io/old pixiJs: https://stabfish.io/pixi I had a debug session with the player who has a performance issue where I try to gather some information and try something to see if the performance improves, these are some clues: 1. The frame rate is dropping significantly when he is playing in full screen in a bigger resolution. (10fps he said) 2. He has 60 fps with createJs version. 3. Both versions have the same amount of displayed object. No special culling in either version. 4. The scripting part (logic/cpu) seems to run smoothly, as I have a built-in detection using setInterval to detect whether the game update frequency is not reaching 60 updates per sec 5. I asked him to turn off the 'hardware acceleration' in the chrome browser to fallback to canvas2d purposely, where he reported no significant change, however, it shows that the logic update is affected immediately in my log Please tell me if you know what's the difference between createJS and PixiJS that could cause such issue. Thank you .
-
Are you longing for a time where you could go outside and meet new friends? Gordon City is the game for you! There are a total of 44 friends and just like in real life, some are easy to make and some, you may find, are quite hard. Play it here - Both mobile and desktop supported! Developed entirely in javascript using CreateJS, this is a project myself and fellow contributor MarkFromGordonCity have been working on throughout the last couple of years. With entirely too much time on our hands at the current moment, we thought it was an ideal time to share this game with the world. We are also looking into porting to other platforms (IOS, Android), but we thought itch.io would be a good place to get some initial plays. Please do not hesitate to provide positive and/or constructive feedback!
- 2 replies
-
- 1
-
-
- platformer
- puzzle
- (and 1 more)
-
Hello everybody! I'm new to this site and am quite new to HTML5 game development as a whole. I have watched a few tutorials here and there, and came here in search of help from somebody with more experience than myself to help with my current issue. Currently I am working on a game to run alongside my website (connected to the game in a way). I have gotten a player object that tweens to the position a player clicks on within the canvas to work, but it seems only to work with one person connected only, otherwise the most recently connected player has all control to the position of said player object rather then creating one for themselves. I have tried a couple things (first being to include the image position within the socket.on function) but that only caused the player to be positioned where they clicked without any tweening being done. Here's the code for the client: var socket = io(); var ctx1 = document.getElementById("ctx"); var ctx = document.getElementById("ctx").getContext("2d"); img = new Image(); img.src = "FrontpageGuy.png"; img.xpo = 250; img.ypo = 250; socket.on('newPos',function(data){ ctx.clearRect(0,0,1024,576); for(var i = 0 ; i < data.length; i++){ TweenMax.to(img, 1 ,{ xpo:data[i].x, ypo:data[i].y, repeat:0, }); ctx.drawImage(img, img.xpo, img.ypo); } }); function clickDetector(event) { var xVal = event.clientX; var yVal = event.clientY; console.log("click X:" + xVal + ", click Y:" + yVal); socket.emit('movePlayer', {x:xVal, y:yVal}); } ctx1.addEventListener('click', clickDetector, false); -
With holiday season approaching I made a winter themed Bubble Shooter. The name of the game is POP-POP JINGLE and it is designed to run on mobile and desktop browsers (touch and mouse controls): http://b10b.com/poppopjingle/ Gameplay: Happy Holidays for everyone as you pop-pop all the winter gems using fast reflexes and strategy! An addictive and easy to play Match-3 Puzzle Shooter packed with over 100 festive themed levels. Can you collect all the stars? Technical: Based on our earlier game (POP-POP CANDIES) this version is also made with Haxe + awe6 + CreateJS and designed to run on any device at ~30fps. Many of the assets originated from royalty free sources. I made the holiday themed puzzles and the bulk of the other level designs came from a level pack designed for Frozen Bubble, so big thanks to contributors there. The levels (and star ratings) were sorted based on completion time of sample plays. This game is available to license from our website: http://b10b.com
-
So today I come asking for help. I'm converting from a Flash Developer over to JavaScript and I'm using CreateJS, I wanted to know if anyone had recommendations on how I could export my sprite sheets so that it's a little easier to assemble in CreateJS. How I make my characters in Flash is I have the main character MovieClip and I have a nested MovieClip for mouths. The main character MovieClip may have animations so on every frame where the character talks I have a nested mouth clip container(I have provided a video clip on how the animations plays without mouth interaction by code: https://youtu.be/TJOAME7MvgI - and how it acts with interaction: https://youtu.be/XCODle6ocvs). Does anyone know the easiest way to export the animation from Flash and the mouths? I was gonna do the animation on a separate SWF and export it to a separate sprite sheet then for each frame do each set of mouths as a sprite sheet and just show them when it gets to that frame in CreateJS. But how I've been making these so far is the mouths are done by frame on the timeline. In flash I did it like this too but also did them on layers, so if the mouths were on layers it be character.mouths.A_mc.visible = true; and set the last one's visibility to false...if I did it by frame I'd just do character.mouths.gotoAndStop("A"); and this is currently the only way I'm doing in in CreateJS. If anyone has been following along so far lol some suggestions would be great on how you would tackle this!
-
I want to do the same animation for bending card but unable to do so using css and border-radius property. Is there any property or method by which we can make it happen.. Plz help me regarding it.. card folding (1).mp4
-
i am not able to control the css properties for animation using Tweenjs , finding difficulty in adding it. Suggest how could i achieve it. I want to control border radius css property of css.
-
Hello, We had made a game in Flash AS3, We converted it into HAXE so that it works on a web browser, but the game lags(animation). Now we want to convert this kind of game in HTML5 which has heavy animation, suitable for web browser - Is this Possible? We are looking for an alternative platforms/framework/library that would support our game. Any and every suggestion would help us a lot. Here is the demo link - https://www.youtube.com/watch?v=cNkXp-pTLic -
Hi! I'm an experienced programmer with C++, but just getting started with JavaScript. I'm making a simple 2D game to get started. I'm using the CreateJS library to do my image/spritesheet manipulation. Right now, I'm trying to create a Sprite class, which will set up a spritesheet in the constructor, and draw the sprite with coordinates in the draw() function. (a member of my Sprite class) Anyways, I'm doing some debugging now. My program stops in the constructor of my Sprite class, and I can't figure out why. To anyone with CreateJS experience, what is wrong with my constructor function?!?!?! Thanks! class Sprite { constructor(src, frameWidth, frameHeight) { window.alert("DEBUG constructor. " + src + ", " + frameWidth + ", " + frameHeight); //Gets here this.spriteSheet = new createjs.SpriteSheet({ images: [queue.getResult(src)], frames: {width: frameWidth, height: frameHeight}, animations: { ani: [0,4] } }); window.alert("DEBUG end constructor"); //Never gets here } draw(x, y) { animation = new createjs.Sprite(this.spriteSheet, "ani"); animation.regX = 99; animation.regY = 58; animation.x = enemyXPos; animation.y = enemyYPos; animation.gotoAndPlay("ani"); stage.addChildAt(animation,1); } }
-
I have been haven some problems trying to replace a image in an existing Object. I have a example of the code I am using to do this.. The background image loads and shows on the canvas fine.. But when I call the handleReplaceImage function it doesn't replace the existing image, but adds the new image so I get the old and the new both in the same CreateJS Object.. So on the canvas I see two Slate Holes when it should be just the new one. So its overlaying.. How do I total replace SlateHole1.png with SlateHole2.png? Or remove SlateHole1.png from the CreateJS Object? I guess both would be worth knowing if anyone can help... var SlateHole=null; function init(){ stage=new createjs.Stage("Canvas"); createjs.Touch.enable(stage); var SlateHoleSrc=new Image(); SlateHoleSrc.src="images/SlateHole1.png"; SlateHoleSrc.onload=handleSlateHoleLoad; } function handleSlateHoleLoad(event){ SlateHole=new createjs.Bitmap(event.target); stage.addChild(SlateHole); stage.update(); } function handleReplaceImage(event){ var SlateHoleSrc=new Image(); SlateHoleSrc.src="images/SlateHole2.png"; SlateHoleSrc.onload=handleSlateHoleChange; } function handleSlateHoleChange(event){ SlateHole.image=event.target; stage.update(); } -
Hello This is my first HTML5 game, please play and share your ideas. "Kickin' it : with freestyle masters" is a simple yet challenging soccer ball juggling game. You are controlling the player to keep the ball on air as long as possible. You need to tap ( press keys for pc ) just as the ball is about to hit your foot. Pressing too late or too early and will miss the ball. Mobile : Tapping the left of the screen kicks out your left foot, tapping the right kicks out your right foot. PC : Pressing the left/A of the keyboard kicks out your left foot, Pressing the right/D of the keyboard kicks out your right foot. Unlock new player by collecting coins Share score and challenge your friends Play Demo https://putrefied-aptitude.000webhostapp.com/kickinit/ Thank You Francis Davidson
-
Hello, guys. I'm trying to set up a workplace using CreateJS and Typescript. So far I tried only to use VisualStudio for this. I see everyone using the "createjs." namespace, can't find it in .d files from here: https://github.com/borisyankov/DefinitelyTyped Or is there another way of using Typescript with all the typing, intellisense and debugging?
-
Hi All, I am a JavaScript developer with more than 7+ years of experience on HTML5 game development, i can work on game development for multiple platforms. I can work on projects with limited timeline and budget, available for both part time and full time. Regards, Gideon
-
Hello everyone, I'm really confused. I created this flow for my game: start game > press key brings up in game menu > exit game to go back to main menu > start game again. Debugging purposes I have functions write to console when complete. It works as expected but these functions are called times two (sometimes three). What could be causing this? I've made sure my even listeners are on and off appropriately. There is no double click...I'm lost for words. I've attached screenshots. Thank you in advance, hopefully I learn something.
-
Hi All, I'm a JavaScript developer with goods hands on experience on game development. I need artists to develop games for IOS ,Android and web. if any one intrested do Pm me.
-
Anyone know how to define a repeat count for a tweenJS tween (using easeJs framework) ? The only option I can currently find is {loop:true} which causes infinite looping. //my code var solidsAnim = createjs.Tween.get(icon,{loop:true}) .to({y:solidOriginalY - 50}, 600 ,createjs.Ease.SineIn) Thanks !
-
In a personal effort to return to making games for fun I made a classic Bubble Shooter styled with ... Candies! The name of the game is POP-POP CANDIES and it is designed to run on mobile and desktop browsers (touch and mouse controls): http://b10b.com/poppopcandies/ Gameplay: Enjoy a sweet puzzle as you pop-pop all the candies using strategy and fast reflexes! Featuring 100+ challenging puzzles and marathon endurance levels this colorful Match-3 Puzzle Shooter game will entertain for hours. Technical: Made with Haxe + awe6 + CreateJS and designed to run on any device at ~30fps. Many of the assets originated from royalty free sources. The level designs mostly came from an open source project called Frozen Bubble, so big thanks to contributors there. The levels (and star ratings) were sorted based on completion time of a few thousand sample plays. A level designer might be added later. This game is available to license from our website: http://b10b.com
-
Hi all, Just found someone! I need help with a game built in CreateJS. Very simple task. Just remove a message from the gameover screen.PM me or email me at jogosgratispro at GMAIL.Thanks, -
My second timeline game is finished. http://athleticarcade.com/educational/timeline/firststates/ The first game about ancient Rome was also posted here http://www.html5gamedevs.com/topic/23445-timeline-ancient-rome-createjs/ This time I use more pictures & photos. I have attempted to make it more accessible, but it may not have the same depth as the Rome game. I learn with each game and hopefully the next (classical Greek) will be even better. I also aim to add slick effects for each game. To this I added 'parallax' scrolling background. Hopefully subtle enough to not be distracting..
-
I had the chance this month to revisit a client project and reskin it as something different. The result was GRAND PRIX HERO, a "retro inspired pseudo 3D racer" similar to the Sega classics I used to play in the arcades. Designed to run in browser on either mobile or desktop the controls use tilt, touch or keys - gameplay is crippled optimized with auto-accelerate accordingly ... http://b10b.com/grandprixhero/ Gameplay: Compete across 4 races in the Grand Prix Series. Dodge traffic, boost, collect coins and upgrade your car for the next race. Are you the Grand Prix Hero? Technical: Made with Haxe + awe6 + CreateJS, the underlying engine is heavily inspired by this popular tutorial: http://codeincomplete.com/posts/2012/6/22/javascript_racer/. Everything is Canvas based, just LOTS of drawImages, no WebGL - so older devices may struggle (there are many auto degrading detail settings built into the game, but they can only do so much). The majority of graphical and audio assets came from my stockpile of never-quite-finished racing games, so I'm pleased to finally publish some of them (even if it is on a much simpler game than they were originally intended for). Next steps: Sega style voice over? Suggestions welcomed.
