Search the Community

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.

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); } }

This is my code, which changes by frame, I need to do a scoring system, but when I used the following code to add a score it works fine for the first 2 frames then doubles and by the end it's like 229. Thank you for any help. Score; var score = 0; function scoreIt(); { score += 1; } Frame by frame; this.stop(); this.ans1.addEventListener("click", fl_MouseClickHandler.bind(this)); function fl_MouseClickHandler() { this.rocket2.play(); this.rocket1.stop(); this.rocket3.stop(); this.next.mouseEnabled = true; this.ans2.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); } this.ans2.addEventListener("click", f2_MouseClickHandler.bind(this)); function f2_MouseClickHandler() { this.rocket1.play(); this.rocket2.stop(); this.rocket3.stop(); this.next.mouseEnabled = true; this.ans1.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); scoreIt(); } this.ans3.addEventListener("click", f3_MouseClickHandler.bind(this)); function f3_MouseClickHandler() { this.rocket3.play(); this.rocket2.stop(); this.rocket1.stop(); this.next.mouseEnabled = true; this.ans2.mouseEnabled = false; this.ans1.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); }

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 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.

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 !

embracethebunny.org is an experimental website being built with the vision of allowing people to create and share their own 2D adventures with the world. Basically, what i'm going for is the ability for people to create simple point-and-click adventures by just visiting the site and using the site's web interface, without having to learn any coding. Just share a link with other people to share your adventure. Built-in multiplayer support would be there as well, so people could just drop-in/drop-out with ease. Right now it's just a rough POC. You can't do much with it other than create glorified chat rooms. Here's a test thing i created using the site (it's a little homage to Legend of Zelda): https://www.embracethebunny.org/main/10223ce6-281b-4aee-95d2-b5644fd70b38/poc-1/sandbox You can poke around the environment anonymously just by visiting the link. As a guest can create your own Link avatar and chat with anyone else visiting at the same time. Creating an account will persist your avatar between visits (admittedly not very useful at this point). I created the whole environment using the website admin tool. Video showing the current admin interface: https://www.youtube.com/watch?v=ePolUmEN91E. Site uses HTML5 and web sockets. Any feedback is welcome. Thanks!

Hi Everyone! I work for a developer found and run firm here in Massachusetts. We're currently looking to add one/two HTML5 developers to our current team. You would be working on a SaaS based, interactive, educational gaming platform. Engineers always talk to me about “wanting to feel like they are a part of something meaningful or building something meaningful.” How about using cutting edge technologies you're passionate about, and delivering on a product that 50,000 students will use/adopt every day and around 30 million students around the world will use every year. Certainly an amazing opportunity where you would join a small "SWAT Style" team of passionate, results-driven, engineers. In an effort to design and develop code that delivers rich experiences using HTML5, JavaScript, CSS, and related frameworks on desktop browsers, mobile browsers, and mobile app's. Work that will be viewed by millions and millions of students around the world. Ultimately your work will lead to higher learning outcomes and better experiences in the classroom. The impact you’ll have: • Write code, built tests, participate in design and code reviews with fellow developers • Work with a team of editors, animators, and product owners to understand requirements and deliver technology using Agile software development methodologies • Build quality software in an Agile (Scrum) environment • Design and develop applications and games in HTML5 and JavaScript, with a focus on Canvas-based experiences What we’re looking for: • The ability to thrive in a fast, dynamic environment and a demonstrated record of previous achievement • Bachelor’s degree in Computer Science or a related field (or equivalent experience) • Experience with JavaScript toolchain, from build system to automated testing • Experience with CreateJS/ReactJS OR experience with HowlerJS/EaselJS. • Experience producing and shipping at least one or more applications for desktop or mobile • Strong knowledge of JavaScript, HTML, CSS, DOM, AJAX, RestfulAPI • Experience with Agile processes

Does anybody know how to subtract the alpha values from a shape? After hours of research, my best bet is to utilize an alpha filter (link) The current Shape.mask value does not seem to have an easy way to invert masks (link) Example of what I want to achieve:

Does anybody know how to subtract the alpha values from a shape? After hours of research, my best bet is to utilize an alpha filter (link) The current Shape.mask value does not seem to have an easy way to invert masks (link) Example of what I want to achieve:

Hi guys, How can I create an unfilled circle with easeljs ? Is it possible ?

I'm currently working on my second HTML5 game, Luminarium. It's a space-themed puzzle game with a lightweight physics engine, and should perform well on mobile: Play here. The aim of the game is to command the Lumin race to bring light back to dark planets. You have various directional commands at your disposal, as well as an orbit command introduced scene 3. You can move and size the various commands. Only Lumins the same colour as a planet will light it. Lumins change colour when they pass through a coloured gas cloud. Wormholes are introduced in scene 4. I'd appreciate any feedback you have, particularly with regards to gameplay and performance, in the game's current state. As this is a demo, I've made the locked levels playable also . There are currently 48 levels across 4 scenes, and I have another scene of 12 levels planned. There will eventually be different background graphics for each scene. Sound effects and music are on the TODO list, and the level selection menu needs a little work (as does my rather pedestrian description of the game ). I'm also aware of some current drawing and layout issues, particularly if the device is rotated (or window is resized). Thank you in advance, and hope you enjoy the game! Vince.

Planet Rescue's a physics-based puzzle game. Can you help the Lumins rescue planets from eternal darkness? There's a demo version here, with all levels playable (despite showing the lock symbol). The game is a reworking of Luminarium, based on feedback. I've spent a couple of weeks refreshing the graphics, improving the menu system, making the control system (hopefully) clearer, and replacing tutorial text with pictures. I've also made improvements to the drawing code. Luminarium was previously posted here. I'd be grateful for any feedback, particularly with regards to the points I've mentioned above. Many thanks, and hope you enjoy the game! Vince.

Hi, i recently uploaded the first version of one of my side projects, p(ape)rball. play p(ape)rball The game is a variant of Puzzle-Bobble. It currently includes one randomized endless mode with a local highscore and a dancing monkey. Not to be totally unoriginal, I also included bombs and bricks. Bricks can only be removed by clearing the surrounding items. Bombs explode if you connect them with three items of the same color. The current Version of the game automatically scales to various display sizes (on startup). The last screenshot shows the iPhone 4 version of the game. Please let me know what you think about the current gameplay. Cheers, David

Pom-Bear World Hi, we recently launched a jump and run with a community driven level editor on pom-baer.de. The user created levels are accecible for everyone. If you become a community member, you can create and share your own levels and post your score in the highscore table. http://www.pom-baer.de/spiele/weltenbauer/welten.html Editor and Game were build using EaselJS. We use JSON as level exchange format. The level editor is confined to one plane with a 128x128 grid. We plan to extend the editor with future updates by adding new gameplay components and graphic sets. André Engelmann did the Illustrations ( http://www.andre-engelmann.de ). Backend programming was done by Stefan Fruhen. Frontend programming for game and editor was done by me. Please let us know if you find any remaining issues or bugs. We are thankful for any feedback we can get. Cheers, David

Hi! I've created a game called Bokeh, using HTML5 canvas, EaselJS and Box2dWeb. It's available at bokeh.clay.io (also Kongregate, Chrome Web Store and Facebook). The game aims to be meditative and relaxing, and is based on the blurred circles of light you get in an out-of-focus photograph. I also composed the 6 music tracks included in the game (Bandcamp). I'd be very grateful for feedback, but I'd also like your opinion on a particular point: I believe I've taken a risk in developing a game that does not adhere to the typical cute cartoon aesthetic seen in many casual games. Do you think Bokeh's quieter, more cinematic aesthetic has any appeal? There are some screenshots below to give you an idea. Thank you very much in advance! Vince.

Hello, I'm new to the forums, and new to Javascript/HTML5 game development. I'm coming from a background of Unity3d using Javascript. I've gone through the Easel.JS tutorials both on the site,and on Youtube. The basics make sense but I'm trying to create a puzzle game similar to Collapse or Candy crush. These games are different than Tetris in that Rows are generated from the bottom. Are there any type of tutorials with example code on how to generate rows? In Unity, I can just Instantiate an enemy. How would I go about instantiating and updating a row? Here's an example of what I'm talking about. https://www.youtube.com/watch?v=X97ANpVxOLY Not looking for Full code, but a push in the right direction would be awesome. How do I incorporate the Tutorials I see for Phaser into Easel.JS? Are frameworks that different?

Hi, Sky Knight is one of the games that was done during our "one day" game jam. This game essentially begun as a reverse Ridiculous Fishing. Get up, score on your way down. Sky Knight is still rough around the edges and very unbalanced. There are no menus, no tutorial and no propper Android controls (sorry). Try to enjoy it anyways . Play Sky Knight Gameplay: You control a knight that gets catapulted into the air to fight dragons! Acent as high into the air as possible. Kill all dragons on your way down. Open your parashute bevor you hit the ground. Controls: On dekstop, control the Knight using your Mouse. Click to catapult, move by moving the cursor. Open the parashute by clicking again. On mobile (iOS), press to acent, tilt your device to move the Knight. Press again to open the parashute. Graphics: The graphics werde done by André Engelmann ( www.andre-engelmann.de ). Your feedback is welcome. Cheers, David

Hi, we recently released one of our side projects on the iOS App Store. UDDER IN THE DARK is a puzzle game featuring our blind cow Udder. Guided by the player, she has to navigate through a maze, in complete darkness. The game was build with EaselJS and CocoonJS. It features 31 mazes with different game mechanics. We purposely avoided tutorial levels and menu screens to keep the player invested in the world. UDDER IN THE DARK is optimized to run on iPads, but will also run on iPhones up from 4s. You can download the game for free from: https://itunes.apple.com/us/app/udder-in-the-dark/id737694034?mt=8 All of the graphics were done by Olaf Albers (www.olafalbers.de). If you are into it you can check out concept drawings of the game, on his website. Please let me know what you think of it. Cheers, David

I am working on a card game with HTML5 canvas and javascript with create.js library.I have an onclick function that deletes the clicked card from player's hand(removes the object from the array with splice and then redraws the canvas/redraws on canvas the new array of player's cards without the deleted one) and puts it on the table(push the selected card in the table array and redraws the new table array on the canvas). Also i have an onclick function that deletes the selected card from the table,but the problem is that this function only works for the cards that were drawn on the table on the beginning and not for the cards i selected from player's hand and put them on the table. Here is my code for class Card: function Card(suit,rank,imageFrontUrl,imageBackUrl) { this.imageFront = new createjs.Bitmap(imageFrontUrl); this.imageBack = new createjs.Bitmap(imageBackUrl); this.suit = suit; this.rank = rank; } Here is my code for class Deck: function Deck(){ this.cards = new Array(); this.makeDeck = function() { this.cards[0]= new Card("clubs",1,"images/114.png","images/155.png"); this.cards[1]= new Card("clubs",2,"images/115.png","images/155.png"); this.cards[2]= new Card("clubs",3,"images/116.png","images/155.png"); this.cards[3]= new Card("clubs",4,"images/117.png","images/155.png"); this.cards[4]= new Card("clubs",5,"images/118.png","images/155.png"); this.cards[5]= new Card("clubs",6,"images/119.png","images/155.png"); ... } this.shuffleDeck = function() { var j,k; for (j = 0; j < this.cards.length; j++) { k = Math.floor(Math.random() * this.cards.length); temp = this.cards[j]; this.cards[j] = this.cards[k]; this.cards[k] = temp; } } this.dealCardsPlayer = function() { var playerDeck = new Array(); for(var i = 0; i<6;i++) { var x = this.cards.pop(); playerDeck.push(x); } return playerDeck; } } Here is my code for class Player: function Player() { this.playerTurn = false; this.id = this; this.name = this; this.score = this; this.playerHand = new Array(); this.playerTakenCards = new Array(); this.playerPickCard = function(n) { } Here is my init function: function init(){ var canvas = document.getElementById("tutorialCanvas"); var stage = new createjs.Stage(canvas); var deck = new Deck(); var table = new TableDeck(); var player1 = new Player(); deck.makeDeck(); deck.shuffleDeck(); player1.playerHand = deck.dealCardsPlayer(); table.cards = deck.dealCardsTable(); function drawPlayerCards(){ var rotation=280; for(var i =0;i<player1.playerHand.length;i++) { player1.playerHand[i].imageFront.x=330; player1.playerHand[i].imageFront.y=750; player1.playerHand[i].imageFront.regX = 0; player1.playerHand[i].imageFront.regY = 96; player1.playerHand[i].imageFront.rotation = rotation; rotation = player1.playerHand[i].imageFront.rotation+20; stage.addChild(player1.playerHand[i].imageFront); } } function drawTableDeck(){ var pozicijaX = 150; var pozicijaY = 360; for(var j=0;j<table.cards.length;j++){ table.cards[j].imageFront.x = pozicijaX; table.cards[j].imageFront.y = pozicijaY; stage.addChild(table.cards[j].imageFront); stage.update(); pozicijaX=table.cards[j].imageFront.x+100;} } createjs.Ticker.addEventListener("tick", stage);} this onclick event takes the selected card from player's hand and puts it on the table player1.playerHand.forEach(function(card) { card.imageFront.addEventListener("click", function() { var index = player1.playerHand.indexOf(card); if (index != -1) { table.cards.push(player1.playerHand[index]); createjs.Tween.get(player1.playerHand[index].imageFront).to({x: 150, y: 400, rotation: 0, regX: 0, regY: 0}, 500); player1.playerHand.splice(index, 1); stage.removeAllChildren(); drawPlayerCards(); drawTableDeck(); } }); }); and this click event removes the selected card from the table table.cards.forEach(function (card) { card.imageFront.addEventListener("click", function () { var index = table.cards.indexOf(card); table.cards.splice(index, 1); stage.removeAllChildren(); drawPlayerCards(); drawTableDeck(); })}); The problem is that the second click event works only for the cards that were on the table at the beginning and not for the cards I have selected from player's hand and put them on the table. Any suggestions?

I am developing a popular game among turkish people called Okey. Its a Multiplayer Turn based Board Game. It uses Java on server side, and html5 for client side. Currently i am seeking developers to join my team. Game is not playable at the moment, live at: http://free-okeywarp.rhcloud.com/ create 4 players and join to the same room to deal the stones,

Hi, Elements of Art is currently developing a series of games featuring the JetFriends characters Lu and Cosmo. One of those games is "Cosmo Learns to Fly" (Cosmo lernt Fliegen). The game is a dexterity action game in the vein of Yeti Sports. The goal is to throw Cosmo as far as possible. Unfortunately, I had to remove the game URL. I will update this post with a new link, as soon as we publish the final game. The game was build with EaselJS and box2dweb. Content loading and scene composition are done with a custom build framework. We currently target the first gerneration iPad as our low-end device. The final game will require a user account to post your highscore. As for now, there are no sounds implemented. Our graphic designer for this project was André Engelmann (andre-engelmann.com). Programming was done by me. Please let me know if you enjoy the game, or if you find any bugs I'm also very curious to know your highscore. If you could post it, that'll be great. Cheers, David

Hi. First of all, let put it clear that I don't want to start neither a flame war nor insinuate Phaser is not a.good tool. I just want help to understand both advantages and disadvantages of each approach. I'm brand new to HTML and I am still confused about so many frameworks available. What's the advantage in use mobile jQuery instead of Phaser and vice versa? What's the disadvantage to pick them? For instance, - which one generates smaller size code? - considering the same game developed with both tools, which version will run smoother? Which one consumes less resources? - which one is more productive (considering you're versed on both)? - which one takes care of repetitive repetitive tasks? - it seems that there are much more documentation regarding mobile jQuery than Phaser. Who about phaser tutorials and books? Are there available for phaser? Could you point them to me? Tutorials are a must for me because I learn more by reproducing steps in tutorials. Any thing I missed is very well appreciated. Regards.