Search the Community

Showing results for tags 'tools'.



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 16 results

  1. Hello everyone, Recently i finished my first medium-sized HTML5 game - Medieval Defense Z. I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't. This is more like review/tutorial type of thing, so hopefully someone will find something useful. • Goals: • 60fps. • Smooth gameplay and animations. • Quality comparable to flash games. • Tools: • Language: Haxe. Strictly typed programming language, similar to ActionScript 3.0. Compiles to all major languages, including javascript. • Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried. • Debugging: Chrome. Has console, debugger and profiler. • Rendering library: Pixi.js. Uses display list concept like flash. Works well. • Sound library: Howler. Good enough, the id system is a bit weird though. • Bitmap font exporter: http://kvazars.com/littera/. Free and web-based. • Sprite Sheet Packer: https://spritesheetpacker.codeplex.com/. Freeware and very simple. • Graphics: • Scaling will look ugly if you use many small png files for textures. • If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too). • Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation. • To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio. • Sounds: • Library: Howler. • Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count). • ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup. • I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit). • iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen. • Mouse Events: • Used pixi.js API to open links. • iOS Safari: window.open under "touchstart" event won't open links in new tabs, use "tap" event instead. • sprite.on("mousedown", callback) for desktop. • sprite.on("tap", callback) for mobile. • Performance: • Reuse frequently used sprites. • Avoid creating too many objects every frame. • I would recommend looking up data-oriented programming to get more juice out of Javascript. • Record timeline with Chrome profiler to find performance bottlenecks. • Masks are slow. Use trim if you only need a simple cut. • Very large functions may cause lag spikes. My best guess is that browser is trying to optimize the function. Splitting big function into several smaller ones solved my problem. • Game Debugging: • Simple CSS + DOM side menu. • Basic field view/edit. • Simple buttons with callbacks. • How to debug html5 game on android (mobile) with desktop chrome (PC): 1. Upload game to your website. 2. Go to (desktop) chrome: chrome://inspect 3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development). 4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed). 5. To quit debugging enter: adb kill-server • Conclusions: • Programming in Haxe instead of pure Javascript probably saved hours and hours of debugging. • Would have liked more automated solution for spritesheet and sound stuff. • Poor performance bites sooner or later, so be prepared to do extensive profiling. • Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame. • Overall i am happy with the results, however it took longer than expected to make this game. Any feedback is appreciated. Game Link: http://html5games.vooxe.com/a90bd3f1fba643828ccfb0109b41a252/index.html Trailer:
  2. Phaser Animation Tools

    Howdy Everyone! We are looking at creating a game in phaser for the first time and were leaning towards creating something in vein of "Limbo" (yes, I know that game was all 3D made to look 2D). What are good tools for exporting bone based animations to phaser for development/programming? We would be using bones on flat geo with sprites. We are BabylonJS veterans and we've used a combo of Maya and Unity3D to export animations to that platform, but Phaser I'm not sure what programs export to a Phaser friendly format. Trying to figure out the workflow for our artists. Thanks for any input! -Chad
  3. Html5 Tools of Trade

    Here's a list of the tools I use daily for game creation, coding, animation, etc. I hope you'll find some useful info, let's begin. Art and Animation ########################################################################## Photoshop: The daddy and mommy of raster editing. I've tried lots of alternatives over the years but I always came back to it. Even though it's not a specialized tool (creating pixel art for example) I've found that it's quite flexible and it allows you to work on a variety of project types. I USE IT FOR: Text manipulation, logos, etc. GUI creation - shape tools and the alignment tools come quite in handy. Add effects (strokes, shadows, etc) and you're golden. Overall finishing touches. Playing with curves,intensity, blending modes to give my graphics that extra visual boom. ALTERNATIVES: GIMP: Also called the poor's man Photoshop. It's a pretty decent and powerful program and it has many of the features offer by it's more expensive brother Photoshop. I gave it multiple spins over the time and I was disappointed in the GUI arrangement and the overall workflow. Asesprite, Pyxel Edit, Graphics Gale: These are 3 different pixel art creation software packages. I don't do pixel art and I only tried them for a short amount of time but I hear good things about them. ########################################################################## Illustrator: One of the most famous vector editing programs out there and rightly so. First of all it's an Adobe product so you have good integration with other Adobe products (such as Photoshop) and a certain level of quality. Although it's a bit tricky to get into it at first it's really worth it - there's nothing more powerful out there in terms of vector editing (as far as I know) and you can really create some awesome art for your games. ALTERNATIVES: Corel Draw: Altough I am a big fan of PainterX (digital painting at it's best from Corel) I'm not so taken aback with Corel Draw. Obviously you can create artwork in it but I had the sensation that it is more geared towards desktop publishing. It's a good product all in all but you should rather take the time to learn Illustrator - it will be worth your time. Inkscape: This is a free vector editing software and you would probably expect it to be bad in some way. It's really not. Very easy to learn and with an intuitive workflow it allows you to create art simple and fast. True, it lacks the sophistication of Illustrator but it's the perfect choice for a beginner artist - the guy behind game art for programmers uses it extensively so he must know something. ########################################################################## Moho: IMHO the best 2d skeletal animation software out there. The only decent competitor out there is Toon Boom but it lacks in the bone setup area and it's mainly focused on frame by frame animation. Spine it's simple and intuitive but it lacks the power required for more complex setups ( it also lacks vector drawing). It's only drawback is that it can't import properly .psd's and .ai's but it compensates by having it's own (very powerful and sometimes more intuitive than Illustrator) vector drawing tools. Oh, and I mentioned that it also has particles? Motion Blur? Z Depth layer ordering and animation? IK animation? Animation Morphs (like the ones you can find in Maya)?Smart Bones? Animated strokes? 3d capabilites? You get it, I'm hooked. I USE IT FOR: Character and prop creation 2d Animation ALTERNATIVES: Spine: A lightweight 2d skeletal animation program. Intuitive and friendly especially for artists that are new to animation. ToonBoom: This is Moho's main competitor as it has similar complex animation tools. It has a steep learning curve and it offers lots of features in terms of animation. I think it is more geared toward animation movies rather than games but you can definitely create great art and animation in it if you invest in learning it. Adobe Animate:Adobe's 2d animation flagship product. Since it's Adobe you know you'll get tight integration with other products from the Adobe Suit (Photoshop, Illustrator) and a certain standard of quality. One thing I liked about it was the particle creation capability and the large variety of brushes. Although it's a bit weak in the area of rigging and bones (specially compared to Toon Boom or Moho) it is a powerful and complete piece of software so it might be worth your time. ########################################################################## Cinema4D: Altough I've been infatuated with Maya I've come to love this friendly 3d editing software. Why? Because it just works. It works fast, it works good and it's easy to learn even for 3d noobs. I USE IT FOR: 3d Text creation Various object renders ########################################################################## Lightroom:The best photography catalogue out there. I had 50 thousand photos once (paintings pics mostly) and other similar programs died just trying to read them. Not Lightroom. How can a dev might use it? For me it's useful when I gather lots of art inspiration from various websites, games, etc and I can browse and rate them with ease and pleasure. I USE IT FOR: Inspiration Management ########################################################################## SqCheck:A nifty little utility that allows you to preview rendered frames (sequenced) of animation at various speeds. It might not seem as much but it's much easier to focus on the animation final result without all the clutter of a big animation program. I can spot common mistakes quite easily - like having too much static extra frames at the end of an animation (like having a walk cycle and the foot stays just a bit too much at the end of animation). Or I can load it each third or second frame sequence to see how it looks without all that interpolation in between (because smaller spritesheets and snappier animation - Richard Williams said in it's incredibly inspiring animation book - The Animator's survival kit. I USE IT FOR: Animation final touches ########################################################################## Timeline Fx: A particle editor for all your particly needs. Explosions, flames, bubbles, etc. It has the best blend of usability and ease of use. Another particle editor beast that I like it's Particle Illusion - altough you can create the same particle effects with the standard particle properties (particle life, velocity, lifeOverSpeed, etc) it really shines at particle assembly - you can combine multiple particle effects, animate them, create deflectors/blockers/wind, clip them to alpha masks, etc. I USE IT FOR: 2d Particle creation and FUN ########################################################################## Irfan View: An image viewer that can cook, clean and take out your garbage. Well, maybe not but it does have a motherload of options and it supports a large variety of image formats (.psd, .tiff). It even reads .txt for god's sake. My favourite shortcut in Irfan View is Shift + 1. It opens your image in a predefined application - you guessed it, Photoshop. And it's very fast. I USE IT FOR: Image viewing and fast access to Photoshop. ########################################################################## Programming ########################################################################## Sublime Text: "The text editor you'll fall in love with" - says in the website title. Well I did...over the heels. Coming from a C# background I was used to Visual Studio - awesome IDE, ideal for large projects and with lots of little helpful features. Sadly using JS in Visual Studio it's a drag. Intellisense it's basically useless, go to code definition doesn't work well most of the time, starting it takes quite some time. Sublime Text to the rescue. Lightweight, uber customizable, lightning fast, works like a charm with JS. I recommend installing JS Hint for linting and Js prettify to make your code readable. Also learn some general shortcuts for a better workflow. And if you really wanna fly in it learn either Emacs or Vim shortcuts (it has plugins for both). I used Emacs first - a bit too heavy and a carpal tunnel risk. Switched to Vim and after the rather abrupt learning curve I feel much more comfortable. And if you really wanna protect your hands and increase your touch typing speed I'd reccomend switching from Qwerty keyboard layout to Dvorak. ########################################################################## Phaser: Html5 game framework. Why? You probably know why since you're on this forum so you're probably a dev yourself. Easy to learn, quite powerful, good performance. ########################################################################## Other ########################################################################## Sprite Sheet Exporter Photoshop Script: Altough you can create spritesheets directly from many 2d Animation programs I find it it allows for much flexibility to import sequenced frames in Photoshop (using File > Scripts > Load Files into Stack) and doing various refinements -I usually get rid of all transparent pixels with Image > Trim and apply various color corrections - this will be my master animation document. After that I can resize it to fit my needs (can happen multiple times during the life of a project) and export it to a sprite sheet with the Exporter script. ########################################################################## Audacity: Simple yet powerful sound editing software. While I can't create music/sfx by myself I can greatly improve it by mixing it, fading in/out, applying various effects. ########################################################################## AutoHotkey: A nifty little utility for Windows that allows you to remap various shortcuts, exe paths and other commands to custom keyboard bindings. It increases the workflow speed enormously and it makes a working day more pleasant. Imagine double clicking on Photoshop.exe 30 times a day. It might not seem much but if you're in another application you'll have to minimize it and hunt the icon on desktop - it interrupts the creative process and takes a bit of time. It's much easier just to press a combo keyboard shortcut (mine it's Ctrl + R) and there pops Photoshop. Or my current working folder. Or sublime Text. Try it - you'll love it. ########################################################################## Wamp: Web Development Environment. You'll need it to develop Html5 games and it's very easy to install and use. ########################################################################## Sumatra Pdf: For all your pdf reading needs - programming, animation and design books. First it was Acrobat reader and it was good but then it got bloated and sluggish. Then it was Foxit and it was so much faster than Acrobat Reader but then it got bloated and sluggish. Now it's Sumatra and altough it's simple it's very fast and it supports .mobi and .pdf. Let's hope it stays clean. ########################################################################## Various Online Tools ########################################################################## Tiny Png: Incredible png compression with very little quality loss (if any). I even saw 90-95 percent file reduction on my png's - that's going from 1 MegaByte to 50 KiloBytes - pretty impressive) ########################################################################## Trello: Task management and collaboration. I heard good things about it but I think it's better suited for larger projects and I still prefer to keep track using pen and paper. ############################## @Goblet Ed################################## draw.io: "draw.io is completely free online diagram editor built around Google Drive that enables you to create flowcharts, entity relation, mockups and more. Your data is stored only in Google Drive, so no additional third-party to trust with your data (or extra accounts)." It has good object snapping which makes placing and aligning things very pleasant. ########################################################################## I USE IT FOR: Creating screen flowcharts One page designs Level designs (can import your sprites) ############################## @Goblet Ed################################## Coggle.it: Pretty mind-mapping tool. I USE IT FOR: Creating pretty mind maps to organize new information ########################################################################## *************************************************************************************************************************************** Feel free to contribute in comments (link and your personal experience) and I'll try to keep this updated - just tools and utilities please, there are lots of resources lists already. ***************************************************************************************************************************************
  4. Compilation of various resources

    I have been looking over the forum and such and through various resources and decided to throw together some things for new comers and such. If you want to add to the list, just reply and I will get around to it. I will be adding more as I come across them as well. Legend [$] Must Purchase [/$] Purchase but has Trial Version [//$] Must Purchase if for commercial Assets SoundImage Books, Tutorials and Videos [$] Create a procedrual endless runner [$] Create a vertical endless runner [$] Discover Phaser [$] From null to full HTML5 [$] Interphase [$] Mobile Development [$] Scale Manager Guide [$] Tween Manager Guide Full Source Games Phaser Games Pack #1 Plugins Arcade Slopes by hexus [$] Box2D Premium by Photonstorm Grid Physics by crffty Island JS by luckylooke Isometric Plugin by lewster32 [$] Particle Storm by Photonstorm Phaser Animator by Kody Bentley Phaser Bones by silashatfield Phaser Inspector by netcell [//$]Registry Plugin by Phreaknation [$] Virtual Joystick by Photonstorm [$] Waveforms Path Editor by Photonstorm Tools Leshy SpriteSheet Tool by Leshy Labs [$] Phaser Editor [/$] Texture Packer
  5. I used the tool :https://github.com/BabylonJS/Babylon.js/tree/master/Tools/MakeIncremental. For the cut up of the babylon file has 226mb, the working environment win7 64; memory size: 16g; visual studio 2013; I monitor the changes in memory, when the program takes up nearly 2g when stopped. I have added app.config: <runtime> <GcAllowVeryLargeObjects enabled = "true" /> </ Runtime>; But still not, how do I do. Thank you! The following is an error message: Snap to System.OutOfMemoryException HResult = -2147024882 Message = throws an exception of type "System.OutOfMemoryException". Source = mscorlib StackTrace: In System.String.CtorCharArrayStartLength (Char [] value, Int32 startIndex, Int32 length) In Newtonsoft.Json.Utilities.StringReference.ToString () In Newtonsoft.Json.JsonTextReader.ParseNumber () In Newtonsoft.Json.JsonTextReader.ParseValue () In Newtonsoft.Json.JsonTextReader.ReadInternal () In Newtonsoft.Json.JsonTextReader.Read () In Newtonsoft.Json.Linq.JContainer.ReadContentFrom (JsonReader r) In Newtonsoft.Json.Linq.JContainer.ReadTokenFrom (JsonReader reader) In Newtonsoft.Json.Linq.JObject.Load (JsonReader reader) In the MakeIncremental.Program.ProcessSourceFile (String input) location c: \ www \ babylonjsExploer \ Babylon.js-master \ Tools \ MakeIncremental \ Program.cs: Line number 236 InnerException: what should i do?,thank you!
  6. Hi guys, Im using Buildbox and Construct 2 to build my games... i found some constraints in Builbox because it does not allow me to do certain games like puzzle ones... Construct 2 lincese is much cheaper...(i dont have to pay 99 dollars a month). So it is worth using it? Can i do eggerland mistery game using construct 2? Or do you think there is other tools available for handling more complex games (2d games - i also have unity 3d installed). What do you think about it?
  7. Photoshop as Game Editor

    Hi my HTML5 Gamedev fellows. A few months ago I started using a very interesting workflow / toolset in developing my games. Basically I use a Photoshop Generator to automatically do magic things Automatically generates spritesheets of all sprites included in the PSD Document Automatically generate bitmap fonts of the fonts I use in the PSD Document Automatically generates a JSON-File with infos on each layer (Position, Size, Frames, State, Special Properties) Everything in realtime on the fly (without the need to save) In my (custom engine) I can load the exported files and voilá everything is in the game and I can start adding functionality to it. I've used that in every game since then and I really love it. I've also implemented that the game can connect to Photoshop Generator (in Debug Mode) - so I can update assets and GUI stuff in RealTime. I also connect the Game to Tiled (but only via file watch so far) to update level geometry/design in real time. I've put together a short video to show it to you: Here is an in-depth article I wrote: Photoshop as a game editor. Do you think this would be of interest to other devs. At the moment it only is compatible with my own engine, but I think it would be very easy to write loaders for HTML5 Frameworks/Engines.
  8. PlayCanvas adds easy texture compression

    PlayCanvas added support for texture compression to the Editor today. This gives you: One-click texture compression for DXT, PVR and ETC1 At least 6 times compression of all texture data in your games Most optimal image format dynamically selected for the device running your game Check out all the info here (including a sweet demo, pictured below).
  9. Tools compatible with Phaser

    Today I started playing with Aseprite and they have a new command tool to export your spreadsheet to a PNG/Json wich is compatible with Phaser/Pixi so I made this Also I used Grunt to make my deploy system easier, I followed this tutorial wich explains very easy how to use Grunt. And I start wondering if there are other tools that may be usefull to develop with Phaser. So wich tools do you guys use for your Phaser games ? Other one i have used Leshy SpriteSheet Tool
  10. Hi everyone. I have a few questions that I would like some assistance with. As I'm getting into HTML5 game development as a technical designer/artist...I know that with an online game (especially html5), having your game assets require too many server calls is undesirable. What is a comfortable/safe number of server calls? When your dealing with multiple sprite sheets, is there a way to wrap multiple sprite sheets into one file? Not one big sprite sheet. What would be best practices for this?I am concerned because of mobile and/or other countries where bandwidth is an issue. I have the image asset file size part covered with Texturepacker, TinyPNG Re-using certain assets in smart ways, but I know that server calls can be a problem. Any help would be appreciated. Sincerely, Carlos
  11. Game Assets Resources and Tools

    Hi Collection with resources and tools for creating assets used in games: graphics, sounds, video, maps and others. Game Assets Thanks!
  12. Hi, I'm looking for a tool to create/edit sprite poligons. I am talking about the json file with the "shape" coordinate list, like this one: https://dl.dropboxusercontent.com/u/134359065/media/images/polygon/physics.json I am sorry I do not know the name of the file format (more specific than JSON :-) ), in fact if someone can tell me the what it is called, I should be able to find tools to work with it :-) And if there isn't one already, I should be able to make one in Phaser, right? :-) Thanks in advance Szocske
  13. Erorr renderer in tools.loadfile

    Donwload new package babylon.js and get example "actions" from http://www.babylonjs.com/playground/?16# and save to local folder. Execute file index.html generate error, see screenshots. index.html
  14. Creating HTML5 Games with Unity

    Hi HTML5 Game Dev community! Having developed games both for HTML5 and for 'native mobile' using Unity, I've always been yearning for a great toolset and framework like Unity with a full-featured language like C#. For the last few months, our tiny team worked hard to make Unity HTML5-capable - a complete workflow that lets you build games for mobile & desktop web. This week, we just launched a Kickstarter Campaign to accelerate development. Take a look, we could use your support!
  15. So, what do you like to write your code in? I have been using Gedit on Linux till now, so I wish to get myself a new text editor, and maybe discover some interesting things.
  16. Sweet tool for 8 bit audio

    https://github.com/meenie/8bit.js Here's the SMB theme: http://plnkr.co/edit/dv5iEPuMun0EIdmt9Y6n?p=preview Support for sine, square, triangle, and sawtooth. Great interface overall for people who think in terms of notes rather than sequences, loops and channels. It's this simple (via the github readme): var music = new EightBit(); music.setTimeSignature(4,4); music.setTempo(120); var piano = music.createInstrument(); piano.note('C4', 'quarter');piano.note('D4', 'quarter');piano.note('E4', 'quarter');piano.note('F4', 'quarter');