Search the Community

Showing results for tags 'easeljs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 24 results

  1. Multiple Requests

    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.
  2. 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 !
  3. [WIP] embracethebunny.org

    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!
  4. 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
  5. 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:
  6. 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:
  7. Hi guys, How can I create an unfilled circle with easeljs ? Is it possible ?
  8. 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.
  9. 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.
  10. 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
  11. 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
  12. Bokeh game

    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.
  13. Tutorials for Collapse Style Puzzle Game

    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?
  14. 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
  15. Udder in the Dark

    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
  16. 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?
  17. 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,
  18. 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
  19. mobile jQuery, EaselJS, GMS or Phaser

    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.
  20. Hi, Elements of Art is currently developing a series of games featuring the JetFriends characters Lu and Cosmo. One of those games is "Mit Lu einmal um die Welt" (With Lu around the World). The game is a "Space Taxi" inspired action game. The goal is to transport customers to the landing pad nearest to the airport. This is done with your trusty helicopter. 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. Please let me know if you enjoy the game, or if you find any bugs Cheers, David
  21. Hi everybody, This is my first attempt to make an HTML5 game for mobile (portrait). http://thetappingdead.com/alice/ The game play is very simple: avoid zombies. Tap on the screen to make Alice jump, Tap twice for a double jump. I would like to know if it is running ok on your devices and overall feedback about the mechanics. Thank you!
  22. Pilot School

    Hi, I usually don’t post about agency work, but we recently launched a game called “Pilot School” that I wanted to share. Launch Pilot School The game is a simple endless runner (flyer?). It was build around EaselJS and uses Box2D for the physics. It is also Web-App capable and switches to a “low-res” version if the display width is smaller than 960px. Enjoy, and let me know if you like it or not. Cheers, David
  23. Hi there, I want to present my just released ebook: From Zero to the Appstore - Blueprints for an HTML5 Game The book is a step-by-step guidance to creating and publishing an HTML5 game for mobile devices. The whole process is paired with an example app that is also available for download in the appstores. The frameworks and tools used in the book are: EaselJS, CocoonJS and PhoneGap Build. Why do I post this here? I'll be honest: Primary for marketing purposes - but also I'm looking for reviews & feedback! So if you have a blog I am offering a free copy of the book in exchange for feedback & a review on your blog. Please drop me a note if you're interested. Of course your blog should have SOME traffic and be online a little longer than just 2 weeks, but my requirements are not that high. Get all information about the book(app, samples chapters, ect) at: http://indiegamr.com/zerotoappstore/ Thank you all in advance!
  24. Hi Team, I am a wireless specialist by trade and a very amateur programmer in my spare time. So I may ask some funny questions and my understanding may not be on par with most of you. I am trying to program a basic asteroid avoidance game in easeljs. Basically I am drawing 10 asteroids on the canvas and making them move towards the left and offscreen. I will later initialise them offscreen to the right, move left and recycle them once they hit the left edge of the canvas to give a continuous asteroid field effect. Underneath is my code. All is working except my tick function (animate function). The tick function is actually part of createjs.Ticker class, so I am not actually calling this function with tick() anywhere in my code as the createjs.Ticker.addListener(this) is doing the work. The stage.update(); call in the tick function redraws the canvas. This is working but every frame it is not animating my asteroids. The for loop before the stage.update() seems to not do anything ! Not sure how to console debug it ! The Documentation surrounding the ticker class is very confusing. I have gone through a number of demos and they have similarly used the ticker function with bitmap image instead of circles. Could any of you who have some Easeljs experience please give me a brief rundown on how to fix the issue, how to correctly call the ticker.addlistener function and if there are any rules with adding additional functionality to the tick() function as the easeljs library has a number of attributes already defined in the tick() function. I could write my own animate function but I would rather use the Easeljs way for now as it cuts down on the code substantially. Thank you for taking the time to read this post. Hope you have a great evening and Thank you in advance. <!DOCTYPE html><html><head><meta charset="utf-8"><title>Easel Intro</title><script src="js/easeljs-0.6.0.min.js"></script><script>var canvas;var stage;var Asteroid;var numAsteroids;var radius;var asteroidsARRAY;var canvasWidth = 800;var canvasHeight = 600; function init(){ canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); drawAsteroids();} function drawAsteroids(){ var container = new createjs.Container(); stage.addChild(container); var numAsteroids = 10; // Number of Asteroids to be reproduced on screen. asteroidsARRAY = []; //Array to store Asteroids. for (var i=0; i<numAsteroids; i++){ //for loop to draw 10 Asteroids on canvas. radius = 5+(Math.random()*10); templateAsteroid = new createjs.Graphics(); templateAsteroid.setStrokeStyle(1); templateAsteroid.beginStroke(createjs.Graphics.getRGB(0,0,0, .7)); templateAsteroid.drawCircle(0,0, radius); Asteroid = new createjs.Shape(templateAsteroid); Asteroid.x = Math.floor(Math.random()*canvasWidth); Asteroid.y = Math.floor(Math.random()*canvasHeight); Asteroid.speed = (Math.random()*5)+2; container.addChild(Asteroid); Asteroid.name = "asteroid"+i; asteroidsARRAY.push(); } stage.addChild(Asteroid); createjs.Ticker.addListener(window);} function tick(){ var l = asteroidsARRAY.length; for (var i=0; i<l; i++) { var a = asteroidsARRAY; a.x -= a.speed; document.write(a.x); } stage.update();}</script></head><body onLoad="init();"> <canvas id="canvas" width="800" height="600"> <!-- Insert fallback content here --> </canvas></body></html>