Jump to content

scheffgames

Members
  • Content Count

    205
  • Joined

  • Last visited

  • Days Won

    3

Reputation Activity

  1. Like
    scheffgames reacted to drmop in Html5 Tools of Trade   
    Booty5 - Game engine and editor for all HTML5 development
    IGX SDK - Cross portal web game services back-end, monetisation etc..
    Unity - Mobile development
    Node - Running back-ends and local server
    Visual Studio Code - Code editing
    Visual Studio - Tool development
    Serif Draw Plus - Art work
    Affinity Designer - Art work
    Texture Packer - Packing art work
    Audacity - Converting and optimising audio
    Filezilla - ftp
    Digital Ocean - Server provider
    Git - Version control
    Discord / Skype / Slack - Comms
    Putty - Connecting to back-end
    Diff Merge - Code diff
    Google - Everything else
  2. Like
    scheffgames reacted to rui_madeira in Html5 Tools of Trade   
    Here's my tools:
     
    Unity + VSCode for desktop + mobile + WebGL development
    GameMaker for mobile + HTML5 development
    Affinity Designer for artwork
    Spine for animation
    Audacity for audio editing
     
     
     
     
  3. Like
    scheffgames reacted to iDev in Html5 Tools of Trade   
    Great list, Saw that you have missed out Brashmonkey's Spriter
    It's a must have for 2d animation in my opinion!
  4. Like
    scheffgames got a reaction from apk in 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.
     
    ***************************************************************************************************************************************
  5. Like
    scheffgames got a reaction from DanEv in 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.
     
    ***************************************************************************************************************************************
  6. Like
    scheffgames got a reaction from plicatibu in Open List of html5 publishers contacts.   
    There seems to be a lot of secrecy about html5 publishers and there's not many lists out there (the one I know about is on TV blog). Altough I understand that this is a competition and each of us wants a big piece of the pie I still think that the lack of disclosure it's unhealthy for the HTML5 market. Also it's very hard for a new developer to get it's foot in the door without having contacts - yeah, I'm a new developer too.

    Here's a list of publisher contacts that I made with Google's help.
    You can also use this list to take the pulse of the market so to speak - get your inspiration and see the latest trends and game quality requirements.
    All data in this list is publicly available on their respective websites and there are no private/personal contact data displayed as far as I know. If you see something that needs to be removed or it's in violation of some policy please let me know and I'll update it.
    Also in the emails I've replaced the at sign and the dot with the words "at" and "dot" to make it harder for bots to collect them. 
     
    ------------------------------------------------------ EMAIL SUBMIT: ------------------------------------------------------ ARMORGAMES Websites: http://armorgames.com/ Submit: Tasselfoot at Armorgames dot com ***************** BORED Websites: http://games.bored.com/ Submit: sales at floratraffic dot com *************** BIGDINO Websites: http://bigdino.com/index.php Submit: info at bigdino.com ********************** NOTDOPPLER: Websites: http://www.notdoppler.com/ Submit: contact at notdoppler dot com *********************** TOOMKYGAMES Websites: http://toomkygames.com/ Submit: john at toomkygames dot com *********************** ADDICTING GAMES Websites: http://www.addictinggames.com/index.jsp Submit: submit at addictinggames dot com ************************* MINICLIP Websites: miniclip.com Submit: gamedev at miniclip dot com ************************** Y8 Websites: y8.com Submit: idnet at webgroup-limited dot com *********************** GAMES 2 WIN Websites: game2winmedia.com Submit: partnerus at games2win dot com ***************************** DROPANT Websites: dropant.com Submit: contact at dropant dot com **************************** POKI Websites: poki.com Submit: hello at poki dot com ****************************** BGAMESAPP Websites: http://www.bgamesapp.co.uk/#!/ http://gamifive.mobivillage.fr/#!/ http://www.giochissimo.it/#!/ Submit: bgamesuk at buongiorno dot com ******************************************* EBOG Websites: ebog.com Submit: contact at simldc dot com PANDA FREE GAMES Websites: pandafreegames.co.za Submit: pandagamesweb at gmail dot com ----------------------------------------------- EASY SUBMIT FORM -------------------------------------------------- ***************************************** PAPA JUEGOS WEBSITES: papajogos.com Submit: http://www.papajogos.com.br/contato.html (form) *************************************************** GAMES FREAK WEBSITES: gamesfreak.net Submit: http://www.gamesfreak.net/contact.html (form) *************************************************** MY GAMES 4 GIRLS Websites: mygames4girls.com Submit: http://www.mygames4girls.com/contact/ ************************************************* GAMING CLOUD Websites: gamingcloud.com qgames.org Submit: http://www.gamingcloud.com/contact.html (form) *************************************************** ARCADE CABIN Websites: arcadecabin.com Submit: http://www.arcadecabin.com/contact-us (form) ******************************************************* HATCH FUN Websites: hatchfun.com Submit: http://www.hatchfun.com/users/contact.html (form) *************************************************** SPILL GAMES Websites: http://www.spilgames.com/ Submit: http://spilgames.force.com/webtolead ************************************ MAD Websites: http://mad.com/ Submit: http://mad.com/ (bottom page link) ******************************** KANO GAMES Websites: kanogames.com Submit: http://www.kanogames.com/profile/developers (contact button right bottom page) ************************ HTML 5 GAMES .NET Websites: html5games.net Submit: http://www.html5games.net/submit-game/ ************************ GAMEPIX Websites: gamepix.com Submit: http://www.gamepix.com/contact-us/ ***************************** YEPI Websites: yepi.com Submit: http://www.yepi.com/ (contact button bottom) ************************* SOFT GAMES Websites: softgames.de Submit: http://www.softgames.de/developers/ (submit game button) ************************ Jeux-gratuits Websites: jeux-gratuits.com Submit: http://www.jeux-gratuits.com/contactez-nous.html **************************** ORANGE GAMES - SENT Websites: orangegames.com http://m.starbie.co.uk/ http://oyungemisi.com/ http://spele.nl/ Submit: http://orangegames.com/contact/ (bottom page) ************************ COOL GAMES Websites: coolgames.com http://www.gamepix.com/ Submit: http://corporate.coolgames.com/developers/ (Bottom page) ********************* FAMOBI Websites: famobi.com Submit: https://famobi.com/ (submit game button) *************************** -------------------------------- COMPLEX SUBMISSION PROCESS / UNKNOWN ----------------------------- CLAY Websites: clay.io Submit: https://dev.clay.io/login ******************************* MINIPLAY: Websites: http://www.miniplay.com/ Submit: https://ssl.miniplay.com/dev/user/login (requires a portofolio website) ********************************** ADULTSWIM: Websites: http://www.adultswim.com/ Submit: http://www.adultswim.com/games/pitch/ ************************** NEWGROUNDS Websites: http://www.newgrounds.com/ Submit: Exclusive: http://www.newgrounds.com/pm/send/tomfulp Advertising: http://www.newgrounds.com/wiki/creator-resources/monetization *********************** KONGREGATE Websites: http://docs.kongregate.com/docs/uploading-your-game Submit: https://docs.google.com/forms/d/e/1FAIpQLSfhGdqeKc_4Ph_jisGIv0HM6nD7ouPSMCy58XYj8FTmNLwp5g/viewform?formkey=dF9wRXJWZGFPbXJCalJXdnAtWXdyS1E6MQ&ifq  
  7. Like
    scheffgames got a reaction from LFO in 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.
     
    ***************************************************************************************************************************************
  8. Like
    scheffgames got a reaction from msqar in Detect when sprite collides with Wall   
    You're making me laugh. We would've saved even more time if you bothered to search the docs or examples or google it yourself or give more details when asking the question. 
     
    Also a condescending tone won't get you far when asking others for help. But maybe english it's not your first language so you're not so versed in using it (it's not mine either but I manage). Let me give you hand with that since I couldn't answer your original question
    "I'm sorry if the question wasn't clear enough, here's exactly what I'm looking foor...insert details...The documentation wasn't very helpful either or maybe I didn't know where to look. Anybody else have other ideas?"
    You're probably new to Phaser - so am I! Here's how my train of thought would be if I had this particular problem, maybe it will help you somehow.
    "Hmmm....so I'm using physics and I need an event to let me know when I touch the wall. Let's try....Phaser physics event on google. Top link is a phaser example describing collision events for Arcade Physics and the second one is P2 Physics impact events. Well, let's take a look at the first example:
    bla blabla bla bla, AHA, 
    face1.body.onCollide = new Phaser.Signal(); face1.body.onCollide.add(hitSprite, this); Huh, dunno much about this onCollide thingy, what is it precisely? It says a Phaser.Signal. Let's look for that shall we?
    Google it and the first link points to Phaser.Signal - 2.4.4. Click on it and switch to version 2.6.2. Let's see, bunch of text describing what it does, couple of properties which I don't need now and HEY....there's the method I just saw - add. Let's read it and try to understand what it does....got it.
    I still don't know much about physics though so let's get back on that body thingy. Let's try.....Phaser Body on google . Sure enough, the first thing that pops is Phaser Physics Arcade Body. Let's see what we have here...scanning the page....it's not a property so let's move to methods....scanning further....well damn, there's no onCollide property. Where did we go wrong? Let's take a look back at the code and ..... oh yes, where creating a new property using the new keyword. But why? Let's go to back to Phaser Signal page and we see that:
    As well as listening to pre-defined Signals you can also create your own: var mySignal = new Phaser.Signal(); This creates a new Signal. You can bind a callback to it: mySignal.add(myCallback, this); I hope this short Google tutorial will help you with your future programming endeavours. 
  9. Like
    scheffgames got a reaction from Fenopiù in 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.
     
    ***************************************************************************************************************************************
  10. Like
    scheffgames got a reaction from gilad905 in [SOLVED] Loading Custom Fonts and displaying Cyrillic/French/Turkish characters   
    I had a problem, wanted to ask for help here, solved it and thought to post it here for future reference and help others.
    I found this solution through trial and error while browsing older topics on the subject on html5gamedevs (thanks to all the guys who posted  them) and some other sources.
    PROBLEM:
    How to load a custom font in Phaser without using bitmap fonts and how to make it display Cyrillic, Turkish, French and other "non-english languages".
    SOLUTION:
     
    1)Create the required folders. I'm using an Assets folder next to index.html and that's where everything should be. Create a Css folder and a Fonts folder inside Assets folder (Assets/Css and Assets/Fonts).
    2)Create a css file inside the Css folder called "fontLoader.css" and use the following settings (obviously use your preferred font and name it accordingly but be careful at the url path - it's one of the reasons I struggled to get it working in the first place)
    @font-face { font-family: "peace_sans"; font-style: normal; font-weight: 400; src: url("../Fonts/peace_sans.otf"); } 3)Place your .ttf or .otf font inside the Fonts folder. Make sure the name from the code above coresponds to the name of the font. In my case I've put the file peace_sans.otf inside the Fonts folder.
    4)Open the index.html file inside your favourite text editor and add a link rel line pointing to your css file
    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type = "text/css" href = "Assets/Css/fontLoader.css"> <title>My Game</title> <script type="text/javascript" src = "Assets/Scripts/phaser.js"></script> <script type="text/javascript" src = "Assets/Scripts/boot.js"></script> <script type="text/javascript" src = "Assets/Scripts/play.js"></script> </head> <body> </body> </html> 5)Now you're all set but if you try using the font in your game it won't work because it will have to be preloaded in some way. There are 2 well known hacks - first it's to create an html element using the custom font and put it somewhere out of sight. I do prefer the second approach because it involves less html/css tinkering. 
    Here it is (thanks html5gamedevs user who's name I cant remember):
    Add text in in a game state that happens before your play game state - in my case I've used the boot game state. Notice the line containing this.game.add.text - it creates a 1px text using the custom font I need and it doesn't matter because it won't be visible and the boot phase it's very quick anyway:
    var bootGame = function(game){}; bootGame.prototype.create = function(){ console.log("Booting game"); game.physics.startSystem(Phaser.Physics.ARCADE); game.state.start("loadGame"); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // game.world.setBounds(0, -651, 900, 1131); game.stage.backgroundColor = "#007f5f"; //fps game.time.advancedTiming = true; //HACK TO PRELOAD A CUSTOM FONT this.game.add.text(0, 0, "hack", {font:"1px peace_sans", fill:"#FFFFFF"}); } bootGame.prototype.preload = function(){ }  
    Now I can simply call in my play game state the following and it will work using my custom font:
    var style = {font: "55px peace_sans", fill: "#eeeeee"}; this.game.add.text(0,0,"My Custom Font Works", style);  
    6)Now the final issue - displaying characters that are not english - like cyrillic, turkish etc. First you'll have to check if the font supports them - you can see this from the website where you download it (Font Squirrel has a nice feature to search fonts by supported languages) - in my case Peace Sans (the custom font I'm using) supports russian. Let's try and change the text to "игра" - which means game in russian.
    var style = {font: "55px peace_sans", fill: "#eeeeee"}; this.game.add.text(0,0,"игра", style); But the text will show some mumbo jumbo characters like this:

    Why oh why? You won't believe it but it's because of the encoding of the .js file where you're calling your code from. On my system changing the encoding of the .js file to Unicode will display the russian text correctly

    There are a couple of ways to do this. First you can simply open the .js file in Notepad (yup, the good old windows notepad) and Save As  - then choose an encoding from the encoding drop down menu - Unicode in my case.
    In case you're wondering why is it grey it's because I'm using a custom Windows Theme. 

    The second way it's addressed specifically to Sublime Text 3 users. So sublime text will save text files by default in UTF8 which will display bad characters. To correct this you'll have to choose File > Save with Encoding > UTF 16 LE with BOM - it's the one that works and displays characters correctly.

  11. Like
    scheffgames reacted to blinxEvo in A game I made for a client   
    thanks for sharing it. well polished, love the mechanics and effects..
  12. Like
    scheffgames reacted to Umz in A game I made for a client   
    Great! Don't need to speak the language or go through instructions. Just jumped in and enjoyed the game!!
  13. Like
    scheffgames reacted to enriqueto in A game I made for a client   
    good job, well polished and nice use of particles.
  14. Like
    scheffgames reacted to bambo in A game I made for a client   
    Nice design and effects. Good work.
    Thanks for sharing the particle tools you use 
  15. Like
    scheffgames reacted to espace in A game I made for a client   
    Waouw impressive, game play is polished (sound and animations) love minder the graphism. But the essential I have play during 5 minutes and it was funny so congratulations. I take a look at your code because I have find that your game is very reactive. 
  16. Like
    scheffgames reacted to b10b in A game I made for a client   
    I liked the shuffle and bonus buttons ... a smart feature / workaround for grid tile arrangements with an odd one out! 
    Gameplay felt both slick and solid - good job.
  17. Like
    scheffgames reacted to mattstyles in Is it worth learning PIXI if I already know Phaser?   
    I'd say yes, definitely, always a good idea to get a feel for the nuts and bolts of a framework, can often be helpful, although I think the Phaser api for accessing Pixi is deliberately kept very similar (the same?). You don't need to do this to use Phaser very effectively, but its a good learning exercise and if you find yourself pushing Phaser/Pixi for perf then it should be a rewarding endeavour. I think Phaser v3 is moving to a different rendering layer though, and v2 doesn't use the latest Pixi version (I think) so there are those things to consider before digging in.
  18. Haha
    scheffgames got a reaction from Arcanorum in Low fps... is my game so advanced?   
    Actually the pool size has a big hit on performance - noticed this with my last game. Not crazy amounts even - 20 vs 40 objects made a significant hole in fps (-10, -15 fps). To be fair the sprites where 200x200px or bigger and my pc rig it's slow (which is good because I can catch perfomance drops quite easily  ). This hapened even though I used every optimization trick in the book - they were images not sprites, I killed them when they were off screen, etc. - probably had to do with PIXI having to deal with lots of texture data or something, don't know for sure and maybe it was solved in Phaser 2.7
    Solution - don't use a pool. With phaser 2.6 perfomance it's better with instantiating and destroying a large number of images/sprites.
  19. Like
    scheffgames got a reaction from hotfeet in 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.
     
    ***************************************************************************************************************************************
  20. Like
    scheffgames reacted to Ppozniak in From 0$ to 100$/day from games documented journey update - setting things up.   
    Holy sheet. It was like my experience... I was creating a game and decided to stop, just to see if it's so easy to push it into real working .apk thing and play it on mobile like real application! Yay!
    A while of reading through the internet - Cocoon is giving performance, great thing "canvas+" and it's great and it's easy!!!11
    Who doesn't like performance and "easy". Looking at the docs... there is almost nothing there? What the ****, do you just need to upload your files and press one button? That's all? Not possible. I've tried doing it with their Cocoon Developer App for Android, the package was 200mb large, but let's give it a try.
    The app gave me uncompressing error - I've created a topic on their forums https://forums.cocoon.io/t/cocoon-developer-app-uncompressing-error/5765 but no one answered. Not great start.
    Oh maybe this app is broken, let's compile it in normal way. But it seems I was trying to install .apk without -debug affix and my phone said "Installation not done"... Yesterday I've downloaded Unity one more time, I said yeah let's **** it it will be easier on Unity. However as a front-end developer I am really in love with JS and after spending a couple of hours with Unity I've felt JavaScript is calling me, and Unity is boring. So I said - hey, I am not giving up! Will try with Cordova itself.
    Couple of hours, installing requirements finally my first test app. Let's run that awesome "cordova build android" - DONE. But what now? I cannot see .apk. Looking at /platform/android and wondering where the heck is my .apk or if it's even there. Instead of searching the directory I've asked google first for some reason. And there it was - /platform/android/build/apk - Sent it to my mobile phone, installed. And that little moment - it works. Feels great.
    Now reading this I've used -debug.apk from Cocoon (normal compilation) and guess what - Cocoon logo shows and then the black screen.
    Will probably give Cocoon another try because it seems great, however not sure why it's not working. For now I'll go with Cordova and see how it goes.
    EDIT: You probably need to use PHASER.CANVAS not AUTO or WEBGL with Cocoon's Canvas+ (obviously). At least that was the issue in my case, yey!
    Yeah I know no one cares, but this article was so true that I had to share with you, good to know you're not alone with those kind of problems. I guess sometimes it also lies on the documentation side, while it's not good enough or clear enough.
    Best regards.
  21. Like
    scheffgames got a reaction from Ppozniak in From 0$ to 100$/day from games documented journey update - setting things up.   
    Full Article
    excerpt
    "
    I was right to be afraid of porting my html5 games to android. It’s a bloody nightmare folks. I may exaggerate a bit – maybe just a bad dream.
    I don’t know about you but I’m a lazy developer. Meaning I just want things to work how out of the box with minimal overhead. I also suffer from the impostor syndrome – specially when it comes to web development, adding plugins to existing packages and configuring stuff. Mainly it scares me because I have 2 options when I encounter something new:
    1)Follow tutorials and use Google
    2)Spend large amounts of time to learn all the ins and outs of a certain technology. 
    Since I may not like learning that tech in depth or simply I don’t have the time I usually go with no. 1 – Google it. It helps if that tech it’s well documented and it works decently.
    Alright, let’s start sharing some tech stuff.
    So what do I do if I want to port my html5 game to Android? A quick google shows me some options: IntelXdk, Cocoon.js, Cordova, PhoneGap, Ejecta, Crosswalk, etc.
    IntelXDK sounds good – so I install it. The interface it’s pretty straight forward but you don’t have an option of simply choosing your project file and have it converted to an APK. Nope. You first have to create a project (blank html5 or cordova) – intel will create a directory structure with some files and folder and most importantly a www folder. Then you open that www folder in explorer, delete existing files and paste your html5 files (index.html + assets) – at least that’s my dumb way of doing it, maybe there are smarter workflows. Like I said, lazy. Next I go to Simulate tab – click play – sure enough my app it’s emulated and it’s displayed correctly. Now I go to the Build tab, select android as my only build option and click on Build Package. After a while I’m prompted to save a .zip file somewhere on my folder. I dully comply. I eagerly open the .zip file hoping for my juicy apk but instead all I have it’s some files and folders. WTF? Thankfully there’s lots of helpful aiding links in IntelXDK – so I follow them and I find out that I have to either use Cordova CLI or PhoneGap to make an APK. CLI sounds awfully complicated so I go to the PhoneGap website, make an account, upload my .zip file, download an .APK (finally) and install it. It works – somewhat. It’s all out of alignment and there’s a status bar sticking out and it’s in the wrong orientation. Damn. More work. Sigh! Now I’m starting to get a feeling it’s going to take a while.
    "
    Full Article
     
     
  22. Like
    scheffgames got a reaction from splashshadow in I'm starting a new documented journey in the world of games.   
    Hi folks! As some of you know my html5 business has not been going very well.  After much thought and consideration I arrived at the conclusion that I do like making games too much so I won't quit this path. But I'm making some drastic changes to my whole (nonexistent) marketing/monetization approach and some changes to usability/UI/features and such.
    I've started a blog documenting my whole approach:
    https://adrianscheff.wordpress.com/
    And that's about it - we'll see where this goes.
  23. Like
    scheffgames got a reaction from b10b in From 0$ to 100$/day from games journey: First Launch - Nature Basketball.   
    God damn it....don't know how I missed that. Thanks for noticing! 
  24. Like
    scheffgames reacted to Rudrabhoj Bhati in From 0$ to 100$/day from games journey: First Launch - Nature Basketball.   
    Just a little constructive criticism:
    The graphics of the game doesn't match with each other, graphical theme isn't consistent. Best of luck
  25. Like
    scheffgames reacted to b10b in From 0$ to 100$/day from games journey: First Launch - Nature Basketball.   
    @scheffgames my friend, one day you're going to be huge!  So don't muddle your brand "Exonplay" with the global might of "Exxon".  Rebrand now - because it is day 1 and costs nothing to do so.  Tomorrow will cost more ...
×
×
  • Create New...