Leaderboard


Popular Content

Showing content with the highest reputation since 07/24/19 in Posts

  1. 2 points
    utkayd

    Need some help with a Free Drawing App

    Worked like a charm! You are a lifesaver, Ivan, thanks a lot.
  2. 2 points
    Hello guys and basically this topic is for you guys/developers that upload games on gamedistribution so, I read too many topics with gamedistribution and all you guys/developers that you read all bad comments, "gamedistribution not pay me yet", "gamedistribution this, that" but you still continue upload to this website and support it? Serious? And the funny is, upload too many games to get in 1-3 or more months ........ What/How earning? 50euros? Or less? They own complete chain in advertising. So officially you get 1/3 of the income of a game. But they get often 2/3 because 1/3 for gamedistribution but also 1/3 since they own big game portals like Kizi. But also: You get 1/3 of the net income. But the ads are sold by their own advertising company so they can control different between Gross and Net. So they get up to 70% and you get 15% ............ if you are lucky! My experience to them? -> Of course. I get ~100euros in 6months from 10+ games... And when i remove all and i upload to other portal, i get ~200euros in 1 month from 2 games only. Imagine how % you get from your games. Even your game is addictive, even is top of the top....... You still lose a lot money. So you can continue upload your games, no problem. And open topics again or post to ask for help. Send them unlimited emails, will answer when they want. Cheers. By the way, @GameDistribution Support I'm still waiting "success stories" ? Can you share some original-success stories? Remember? I post under your post in this topic (June 18): P.S 1: Why open this topic ? -> One (1) only answer : To help new developers and their games. I learn from my mistakes. Bad experience with this company and similar. So i share true stories, that's all. P.S 2: How know and share all this ? -> This is personal sorry but thanks to a friend, he knows. P.S 3: Am i wrong? -> As i said, no problem, you can still continue upload your games. Your results from your earnings is the only truth.
  3. 2 points
    Usually its good to use "position" because it affects transform and not the shapes inside graphics. But in your case, you have to rebuild shape every time because UV's are changing, that means you have to change ONLY the shape, not the position. store position somewhere else, not in "position" field. this.brush.position.set(0, 0); this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle( event.data.global.x, event.data.global.y, this.currentWidth ); this.brush.endFill(); If you want to apply brush multiple times you can just drawCircle multiple points in it. I'm not saying that its best practice, but just if you understand how transforms and texture shift work (and they work like in a Adobe Flash), then this method is probably the best for the case. There's also "matrix" param in beginTextureFill that can help you . Of course when you experiment more, you can start using position + custom matrix inside beginTextureFill but at this point im afraid to suggest that, it will only confuse you.
  4. 2 points
    Velith

    SpineBoy Mouse Track

    Hi, It should be something like that : // 0. Listen which Pixi mouse event that you want (here PointerDown) stage.onPointerDown = (pixiEvent) => { // 1. Get the bone/constraint that you want to move using mouse const target = mySpineObject.skeleton.findBone("target"); // 2. Modify it's coordinate with the mouse event of pixi target.data.x = pixiEvent.data.global.x; target.data.y = pixiEvent.data.global.y; } Not test..
  5. 2 points
    Hello, and welcome to the forums! I like drawing apps and i helped with several before. Basically, you want a textured brush, right? Graphics.beginTextureFill might help with that, you just have to clear() and drawCircle(x, y, r) every time you draw a brush. Usually I use multiple brushes (whole stroke!), and render() a container that has them - its more efficient per frame. There are other tricks, like, how to make transparent (alpha=0.5) brush and not override brushes in the same stroke. As for your original question - you have to wait some time before someone reponses, because my telepathic abilities aren't enough. My post was written without preparation, i didnt even look at your demo yet. Precise answer takes time to prepare.
  6. 2 points
    I wasn't aware that you guys had done this in 5.1.1. So I enabled PIXI.SCALE_MODES.LINEAR and went back to the default DisplacementFilter and ... it worked perfectly. The new shader code I was so happy about is completely unnecessary (on desktops at least - maybe I'll still use it if I want to be ambitious about mobile support). Oh well, at least I learned a lot the past few days. Don't worry about missing my issue, I'm sure I'll manage to wear you down with a million other questions in the next few months. In fact, I already have a tricky one in mind - I'll start a new thread right away.
  7. 2 points
    ZYandu

    Pixi.Text v5.1.1 doesn't work

    import myBitmapTextFont from "myFontsFolder/myBitmapTextFont.fnt"; let loader = PIXI.Loader.shared; loader.add([{name: "bitmapTextFont", url: myBitmapTextFont}]) .load(setup); function setup (loader, resources){ let text = new PIXI.BitmapText("abcdefg", { font: "50px Arial", //Arial is the face attribute located inside the .fnt file align: 'center' }); } Here's my quick code example made with a custom .fnt file from bmGlyph. You really need to follow the instructions closely in the instructions link Ivan shared! 🙂 https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/
  8. 2 points
    ivan.popelyshev

    Pixi.Text v5.1.1 doesn't work

    Found it here: https://github.com/pixijs/pixi.js/wiki/v4-Resources https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/ the only difference is that "BitmapText" is not in extras anymore.
  9. 2 points
    bubamara

    increase descrease sound volume

    Here's the simple one for you : https://github.com/EneaEntertainment/Simple-Pixi-Slider
  10. 2 points
    First try ... Double check Chrome is really using WebGL. Spine mesh deformation can be quite intensive for Canvas and could easily account for these FPS variations (if WebGL isn't working).
  11. 2 points
    b10b

    Everything to create fb instant game

    I'll have a stab at these as I like to snapshot my view on things periodically ... Yes and yes. Pixi has a very decent power to size ratio and solid compatibility (v4.8 may be wisest in 2019?). For a competent developer capable of spinning their own game structure Pixi is ideal for a lightweight browser game. Coming in at less than 5MB total for your IG is wisest. Red tape aside, it's possible but improbable to make money releasing a single game. Primary monetisation choice with FB IG is in-game ads (which are a low value transaction for a developer and an intrusion to the player). In-game purchases have more value but will require significant retention first. Or consider indirect value generation such as consultancy services, brand building, learning for the next game? FB IG is inherently multiplayer (async). Within the SDK are context (group) leaderboards, notifications, packet sharing (challenges). That being said the vast majority of initial plays will be in solo mode, so a compelling single player experience is necessary for retention. Get creative for the crossover! For more advanced multiplayer use a custom backend. Having some separation / abstraction from the Facebook SDK might be wise in case other markets are a better fit for your game? For Multiplayer specifically? Yes there's a TicTacToe example that covers the basics of a client-server model. My advice is play some of the popular titles, understand what the FB IG audience seem to be attracted to and how other developers are leveraging the SDK to create retention and monetisation - warning, some of it can be ugly. Iterative development is going to be crucial, however you'll likely only be promoted once - so use it wisely, and use each territory to run a split test. Or build several games and apply the learning from one to the next etc. If you haven't built dozens of games already, FB IG probably isn't for you yet? Imo there are better platforms that can help evolve game development skills and player retention mechanics. Instead see FB IG as a specific audience with a specific style of game - developing a game precisely for that might work out very well (FB has a HUGE potential audience after all). Imo Messenger games should be about decorating a conversation, in the same way filters decorate a photo. So quick, contextual, personalised, fun, indisposable. That's not necessarily a standard casual game, so changing some assumptions and expectations may be wise. Just my advice, your mileage might vary!
  12. 1 point
    Ah hmh it works, I forgot to set tf.tx = -dX and tf.ty = -dY and set both boolean flags in the render(.) function to false.
  13. 1 point
    Thanks for kind words! Hope that helps you in future when you'll need to make more operations with graphic shapes, transforms and texture fills
  14. 1 point
    Hello Ivan, Thanks a lot for your response! Yes, exactly, I want a textured brush, but the problem is it doesn't move as it should. Above are the 2 pics I attach one showing it should, one showing how it currently is after I added the Graphics.beginTextureFill part. How it currently looks like https://ibb.co/SXZvqzC How it should look like: https://ibb.co/HKJP8PD Below is my code snippet of how I prepare the brush this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle(0, 0, 50); this.brush.endFill(); and how I update the x,y,r of drawCircle this.brush.position.copyFrom(event.data.global); // this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle( this.brush.position.x, this.brush.position.y, this.currentWidth ); this.brush.endFill(); Obviously, I'm missing something about your advice, but I can't see it.
  15. 1 point
    Can't believe it, but I have just received a payment of 474,86 EUR for March, April, May and June. Let's see if others will receive their payments as well, so we can finally get rid of this topic...
  16. 1 point
    johnhex

    SpineBoy Mouse Track

    Like this ? 😃 I'll Try doing what you suggest, but I'll be a great help if you could make an example 😃 thanks.
  17. 1 point
    Your models look awesome, good job
  18. 1 point
    pogames.in

    Explode Ballz

    Explode Ballz is a fun arcade game. The goal of the game is to match balls with the same color. You can get bigger balls and blow them up in order to get a higher score. Explode Ballz
  19. 1 point
    Nagval333

    CAPITAL MAP FLAG web & mobile version

    🌎Updated and extended version of my old geography quiz. Changed graphics and GUI, added two new game modes, new language support and GP Leaderboard. 🎓The game made with Construct2, the graphics by Inkscape (except the icon set of the world's famous landmarks purchased on graphicriver and some sounds bought on audiojungle). The apk built via Cordova CLI. Play in WEB: https://capitalmapflag.netlify.com/ ⚡⚡⚡TRY IT ON GOOGLE PLAY: https://play.google.com/store/apps/details?id=com.SeventhReactor.CapitalMapFlag
  20. 1 point
    jkm

    Graphics artifacts

    I've recently started playing with Pixi so I'm probably doing something very wrong here, but I encountered an issue when I'm drawing circles with PIXI.Graphics. So what I attempted to do is to fill the screen with circles that don't overlap. Each circle starts with 1 radius and then grows every frame. Pretty simple. My problem starts at about ~500 circles. It starts out ok.. But then this happens Is drawing hundreds of circles with drawCircle() into a single Graphics object per frame bad? I don't care about performance at this time, just doing a simple circle packing exercise. Simplified code below. No real reason to include growing and populating math here. I've tried putting begin Fill and line style inside the loop for every circle as well as completely outside the ticker. In the example below I have a separate loop doing math first and then another drawing circles but I tried them together too. I thought the long computation times for growing and populating each frame have something to do with my issue, but maybe it's a pixi/webgl limitation I have no clue about. Halp interface Circle { x: number y: number r: number } const circles: Circle[] = [] //array filled with circle objects. //on then on every frame I do public animate(delta: number) { for (const circle of circles) { growIfPossible() //simplified } populate() //adding new circles - simplified this.g.beginFill(0xFFFFFF) this.g.lineStyle(2, 0x121212) this.g.clear() for (const circle of this.circles) { this.g.drawCircle(circle.x, circle.y, circle.r) } this.g.endFill() } }
  21. 1 point
    There's a way to hack vertices in 5.1.1 . Unfortunately, someone erased my playground that shows it (pixi-playground can be edited by anyone) You can hack inside "graphics.geometry.graphicsData" , change shape points and lineStyle/fillStyle. You have to call "graphics.gepmetry.invalidate()" afterwards. As for cloning - it doesn't copy geometry, it just links to the same. You can have several graphics with different transforms but geometry is the same. It was discussed here, but examples are wrong, someone overrode them by mistake:
  22. 1 point
    Your translation project looks incredibly cool too. I know a bit about i18n
  23. 1 point
    Should be fine, give it a try. If you need someone to test it then take my contact details, I could use a PIXI contact.
  24. 1 point
    What is the false allegations? And from your post on other topic i read just some text like everyone here. Is this somewhere a proof on your post? We discuss for payment delays. Is false? You agree too from your post to other topic. Do you want to discuss about % of earnings developer get from gamedistribution? Am i false? What about advertising program? Am i false too? Do you believe i read somewhere false things? If yes, Where is your proof about your advertising program? You post a link of linkedin profile and what exactly means? That you original person? So what we are here? Robots? Imagine all here to write our porfolios just because we are human. And believe me this is no a proof. Anyone can register on forums, write things, etc etc.... But when we talking for a company, we talking for money and there are some issues from more than 1 , this is a problem my friend. Because gamedistribution and companies like gamedistribution get money because WE-DEVELOPER made games. I'm sure you agree with that. Imagine someday developers stop to upload games. I'm sure will have more gamedistribution registrations here. Please let your proof text and i will delete my topic, don't worry. Until then, good luck with your work the next months.
  25. 1 point
    Good to know, I have just sent them my first invoice. I will publish with them instead of GameDistribution when possible. Was just curious, as they both use very similar platforms.
  26. 1 point
    Magia

    Pixi.js and Graphics

    Ok, naw it looks beter, but this is not anought. I think that I should use png instead PIXI.Graphics. Thanks
  27. 1 point
  28. 1 point
    Can you take a profiler dump/screenshot of profiler page of the page running? That could show what is happening. Example runs without problems on win10/chrome with nvidia 1060.
  29. 1 point
    @odiusfly yes, exactly! Same situation here. GameDistribution is fake company. They manipulate with statistics and hold revenues to never pay. You can't update games if they don't want to. Once you upload games there, and it's their property without any owner permission. I haven't received my payment since last year October 2018 - total 1 year no payments. I have several documents and screenshots as evidence, how this company unfortunately cheats me and others to raise money on their dirty businesses. They many times feature my games and made from my games an promotion banner. And ad revenues? Nowhere! This is ridiculous how this fraud company can exist and use money from publishers, developers to buy game companies or financing their shareholders. ... and Why are gameplays smaller than ad impressions, again fake? FRAUD, FRAUD, FRAUD.. The owners of Gamedistribution and Azerion are scammers and belong to prison or to court for their frauds. @odiusfly "But the ads are sold by their own advertising company so they can control different between Gross and Net." - yes, another fraud See evidence: https://i.imgur.com/tCJlay6.png Gamedistribution = fraud TUNNL = fraud Azerion = owners of fraudulent businesses from Turkey / Netherland = We must sue them and a good note... their twitter is "WeAreAzerion" = better should be "WeAreAzerionScammers" The Truth Will Remain!
  30. 1 point
    Unfold is looking for a “Senior Game Developer HTML5 / TypeScript” in Berlin. https://www.unfold.net/senior-game-developer-html5-typescript-berlin/ Unfold is a German game developing studio. We develop video slot games for the free-to-play & the online gambling market on multiple platforms. Unfold started as a pioneer in social betting. Founded in 2009, we were backed by premier venture capital firms Earlybird and Target Partners. In 2012 we became part of a leading family-owned European casino group. We are now a wholly owned subsidiary of Bally Wulff, one of Germany’s leading manufacturers of electronic gaming machines. Unfold is based in Berlin, Germany, Europe’s gaming hub. To lead the growth of our gaming portfolio we are looking for a “Senior Game Developer HTML5 / TypeScript”. Your Profile: Solid knowledge in TypeScript / JavaScript (OOP), HTML5 & CSS3 You enjoy an object oriented programming style You have working experience with PixiJS Understanding of separation of concerns, design patterns & testing Ability to deliver high-quality, clean code using agile, test driven development practices Aptitude for learning and sharing knowledge / skills, pair programming & code reviews You are a teamplayer and reliable English full professional proficiency, German is a big plus We are looking for someone who is a very versatile professional with a creative mindset, good logical and analytical capabilities, you think from a user’s point of view and you have the ability to prioritize & multi-task. Technologies & Tools we are using: TypeScript, JavaScript, PixiJS, Webpack, Node.js, Selenium, Maven, Jenkins, Git & IntelliJ. This is an excerpt – we adapt our technologies to the conditions and choose others if we think they are more useful. Your Benefits: Build state-of-the-art tech products Be part of a small but growing, highly skilled team developing the next generation of online games No hierarchies and quick decision making processes The best development hardware & software money can buy Attending conferences & trainings 28 days of vacation, very flexible and family friendly working conditions, home office days and no over hours Comfortable working place with free fruit & drinks Cookie driven development and team events How to apply? Please call or send your application to: jobs (at) unfold.net Unfold Gaming Digital GmbH Ramona Döbrich (HR) Colditzstr. 34/36 12099 Berlin, Germany It would be nice if you could add a link to Github/BitBucket and LinkedIn in your CV. Tel.: +49 (0)30 417 212 80 Fax: +49 (0)30 417 212 81
  31. 1 point
    Congratulations! Now I really dont know what can it be. Except profiler itself.
  32. 1 point
    odiusfly

    I Have 100+ HTML5 Games Available!

    @gkagiou Hello friend! Thanks for your email. Please check your inbox later. Have a nice day!
  33. 1 point
    Yeahh you're totally right. It was written right in the console. To my defense though, I was actually running http-server, but the problem was that firefox, for whatever reason, doesn't open local files by default in localhost:8080 like it used to. I had to actually navigate to Localhost:8080 in the URL bar for the code to run. Anyway, thanks for pointing that out, hun. ;; ❤️ xoxo
  34. 1 point
    ivan.popelyshev

    increase descrease sound volume

    Sprite + Texture.WHITE + tint or multiple graphics drawRect Our thoughts and prayers are with you.
  35. 1 point
    Wolfsbane

    Top-down racing game - PoC

    I like it! But after 20 levels or so, I start to lose a purpose? Procedurally generated levels are cool, but if everything else stays the same (AI competition, my driving ability, the challenge/risk) then the levels still end up feeling the 'same'. Definitely work on it more. But the next step is to add increasing difficulty/challenge, and maybe some kind of end-game mechanism. Lives/losing system is standard, and would work ok. 3 lives, you get further and further, each time you slip up, you lose a chance. For increased difficulty, either road obstacles start appearing (bombs in the road? Cow crossing the street? tornado blowing around the map ala Super Speed?), the AI starts getting a bit faster (or more aggressive! Maybe they get spikes on their wheels after level 10.... or one of them gets their hands on a shotgun. ) Also add scoring. Keep track of how many levels get beaten, and then save them in an online highscore. I just beat 20 levels, and I don't feel like doing it again. I 'might' do it again, if some guy beat 30 levels, and I know for sure I can beat that. Also: Took me at least 10 levels before I realized the levels were procedural. 😛 Good luck!
  36. 1 point
    Physics. Look at old flash games that used Box2D or other physics engines. These types of games were super fun to play in my opinion and they had quite a replayability value since there were multiple ways to solve a problem with the use of physics.
  37. 1 point
    ivan.popelyshev

    pixi-spine antialias

    Edges are inside texture, so its actually texture filtering that you are fighting. Two ways, global and local: //global setting, EXECUTE BEFORE EVERYTHING PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; //alternative: one particular spine object resources['myspine'].spineAtlas.pages[0].baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
  38. 1 point
    Davide

    Pixi Legacy v5.1 and Mask issue

    Ok it definitively works! Great support, thanks again!
  39. 1 point
    i used the second option refactoring all containers an resizing stage. it fit perfectly on every browser thanks guy
  40. 1 point
    With that said, is there an easy way to clone and edit a Graphics element? For example if I have the following: let roundedRectangle = new PIXI.Graphics(); roundedRectangle.lineStyle(1, 0xFF00FF, 1); roundedRectangle.name = 'roundedRectangle'; roundedRectangle.selectable = true; roundedRectangle.angle = 0; roundedRectangle.drawRoundedRect(0, 0, 100, 100, 16); this.setPivotToCenter(roundedRectangle); roundedRectangle.position.set(700 + roundedRectangle.pivot.x, 500 + roundedRectangle.pivot.y); roundedRectangle.hitArea = roundedRectangle.getLocalBounds(); this.viewport.addChild(roundedRectangle); Now when I scale it, I would like to clear, refill and keep all of the styles, but I want to resize the shape and keep the lineStyle width at 1px. I am looking for something built-in, if it does not exist, I will create my own.
  41. 1 point
    > but the processes within don't take very long then its on GPU side. You need better profiling tool. I remember that when I last time used chrome profiler, I saw bars of JS rows and then bar on GPU row, and RAF started immidiately after las GPU bar ended
  42. 1 point
    Oh, I did not know that thanks for clarifying it, actually clearing and refilling could work for us since it's fast enough to look seamless to the user. Shapes are just a small part of our app, we mostly deal with images, for which pixijs is the best possible solution out there, I tried almost all of them, none worked better than pixijs. I just hope the support for vectors and shapes become better for pixijs in future (I mean the things that are possible of course) I should extend the classes perhaps. I will share them if I achieved anything useful Thanks for the help and clarifications.
  43. 1 point
    No need to do this at least: anim has an attribute currentFrame. So you can simply do: if (this.anim.currentFrame === 4){ //currentFrame will start from 0-size of animation. // dosomething } I took a look, and we really don't seem to have the textureFrame==46 style.. It's convenient, but if you're going to hard-code a number in there, I much prefer just hard coding to the 0,1,2,3 convention. Think of this: You know you're animation framing is going to be 0=first frame, 1=second frame. Now: If you update your spritesheet.png, and suddenly If you hard-code in =46, and then the image changes, then both the image, and your code has to change. Does that make sense?
  44. 1 point
    scheffgames

    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. ***************************************************************************************************************************************
  45. 1 point
    Hey, another collection topic of useful stuff This time, I'm collecting useful tools and resources that help you in your game development process. If you have any suggestions, please feel free to add your comment to this thread. I will read through the comments and gather the useful resources up here in this post. Applications Tiled Map Editor WIN, MAC, LIN, $0 [sprites, spritemap, map, editor] A orthogonal and isometric (dimetric) tile map editor. Efficient tile editing tools like stamp, fill and terrainbrushes. Rectangle, ellipse, polygon and image objects can be placed with pixel precision. Supports orthogonal, isometric and staggeredmaps. http://www.mapeditor.org/ Shoebox WIN, MAC, $0 [sprites, tiles, bitmap, converter] ShoeBox is a free Adobe Air based app for Windows and Mac OSX with game and ui related tools. Features: Sprite Packer, convert GIF/SWF animation to sprite sheet, Create bitmap fonts, Setting sprite pivot points, extracting sprites from image, creating 9tiled sprites, extract sprites from screenshots, create layered image compos, convert transparent PNG to jpg+alpha image and more... http://renderhjs.net/shoebox/ Spriter WIN, MAC, LIN, $0, $25 [sprites, animation] Spriter is a intuitive animation tool for sprite based animations. http://www.brashmonkey.com/index.htm Code Tools dat-gui JavaScript Apache LicenseThis javascript library enables you to include a easy to use debugging GUI into your project. You should take a look at the examples. https://code.google.com/p/dat-gui/ stats.js JavaScript MIT License This class provides a simple info box that will help you monitor your code performance. It draws a DOM element that shows a graph of your current game framerate or frame processing time. https://github.com/mrdoob/stats.js/
  46. 1 point
    infromthecold

    Pixi.js Showcase

    Yes i made https://skyfight.io and i had submitted it to your pixi gallery a while ago, but it appears to have been ignored, which i don't understand as its a game that really shows what can be done with pixi. About Skyfight Skyfight is a multiplayer dogfighting game where the players control a fighter aeroplane and fly around the game zone trying to destroy other players' planes. Each fighter is equipped with basic machine guns which can be temporarily upgraded by catching falling parachutes, there are also upgrades for manoeuvrability, shields, speed and our favourite Kamikaze. As the players play they gain rank and as they progress through the ranks, the more features such as custom and team games become available at those ranks, also as you play you will also be awarded medals for completing some of the 49 achievements which are distributed throughout the game. How to Play Skyfight The objective of the game is to shoot down as many planes as possible while increasing your score and rank. As you enter the game for the first time there is a keyboard layout which consists of up down left and right and of course shoot which is the space bar. It’s not complicated just lots of fun. Skyfight Strategy The strategy is to kill everyone, but there are some hidden gems like looping which always gets you out of trouble when someone is on your tail. Collecting the health parachutes should keep you alive, but if you do get shot down then just hit enter and take off again as your rank and medals is automatically saved no matter how many times you go down. So don’t just sit there get one up!
  47. 1 point
    ivan.popelyshev

    Proper way to animate sprites

    tutorial for pixi https://github.com/kittykatattack/learningPixi example of animated sprite: http://pixijs.io/examples/#/basics/spritesheet.js pixi animated sprite sources: https://github.com/pixijs/pixi.js/blob/dev/src/extras/AnimatedSprite.js , its `PIXI.extras.AnimatedSprite` proposition to automatically change textures array: https://github.com/pixijs/pixi.js/pull/4433 , you can view source in "Files" tab I suggest you make your own animation class based on AnimatedSprite. Pixi vanilla animation is very limited, just because there are so many ways how to animate sprites, we just keep it simple. Try AnimatedSprite , then try to make your own. You also have to learn how pixi ticker works , there are always problems with ticking, for example you can just forget that you removeChild on sprite, but not stopped it from ticking. SUMMARY: there's no "proper way" of animating sprites. there are many formats for animations like Spine or GAF, and simple implementations that just change the texture. Its up to you to choose one or make your own.
  48. 1 point
    8Observer8

    Haw to snap a moving to a grid

    Thank you very much for your help! Now it is a correct moving: https://8observer8.bitbucket.io/Phaser/BattleCity/dist/ There is not TypeScript in "Code snippet" /// <reference path="./libs/phaser.d.ts" /> export namespace BattleCity { enum Direction { Up, Left, Down, Right } export class Player extends Phaser.Sprite { private speed: number = 80; private currDir = Direction.Up; private xOffset: number = 32; private yOffset: number = 16; constructor(game: Phaser.Game, x: number, y: number) { super(game, x, y, "battleCityScene", "tank_yellow_small_up_01.png"); this.anchor.setTo(0.5); game.add.existing(this); game.physics.enable(this); // Idle animations this.animations.add("idleUp", ["tank_yellow_small_up_01.png"], 10, true, false); this.animations.add("idleDown", ["tank_yellow_small_down_01.png"], 10, true, false); this.animations.add("idleLeft", ["tank_yellow_small_left_01.png"], 10, true, false); this.animations.add("idleRight", ["tank_yellow_small_right_01.png"], 10, true, false); // Move animations this.animations.add("driveUp", ["tank_yellow_small_up_01.png", "tank_yellow_small_up_02.png"], 10, true, false); this.animations.add("driveDown", ["tank_yellow_small_down_01.png", "tank_yellow_small_down_02.png"], 10, true, false); this.animations.add("driveLeft", ["tank_yellow_small_left_01.png", "tank_yellow_small_left_02.png"], 10, true, false); this.animations.add("driveRight", ["tank_yellow_small_right_01.png", "tank_yellow_small_right_02.png"], 10, true, false); } update() { this.body.velocity.x = 0; this.body.velocity.y = 0; if (this.game.input.keyboard.isDown(Phaser.Keyboard.W) || this.game.input.keyboard.isDown(Phaser.Keyboard.UP)) { this.animations.play("driveUp"); if (this.currDir != Direction.Up && this.currDir != Direction.Down) { this.x = this.snapToGrid(this.x - this.xOffset) + this.xOffset; } this.currDir = Direction.Up; this.body.velocity.y = -this.speed; } else if (this.game.input.keyboard.isDown(Phaser.Keyboard.A) || this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { this.animations.play("driveLeft"); if (this.currDir != Direction.Left && this.currDir != Direction.Right) { this.y = this.snapToGrid(this.y - this.yOffset) + this.yOffset; } this.currDir = Direction.Left; this.body.velocity.x = -this.speed; } else if (this.game.input.keyboard.isDown(Phaser.Keyboard.S) || this.game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { this.animations.play("driveDown"); if (this.currDir != Direction.Up && this.currDir != Direction.Down) { this.x = this.snapToGrid(this.x - this.xOffset) + this.xOffset; } this.currDir = Direction.Down; this.body.velocity.y = this.speed; } else if (this.game.input.keyboard.isDown(Phaser.Keyboard.D) || this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { this.animations.play("driveRight"); if (this.currDir != Direction.Left && this.currDir != Direction.Right) { this.y = this.snapToGrid(this.y - this.yOffset) + this.yOffset; } this.currDir = Direction.Right; this.body.velocity.x = this.speed; } else { this.body.velocity.x = 0; this.body.velocity.y = 0; switch (this.currDir) { case Direction.Up: this.animations.play("idleUp"); break; case Direction.Left: this.animations.play("idleLeft"); break; case Direction.Down: this.animations.play("idleDown"); break; case Direction.Right: this.animations.play("idleRight"); break; } } } /** * Snap coordinate to a grid * @param coordinate from (8, 407] * @return snapped coordinate, like: 16, 32, 48, ..., 384, 400 */ private snapToGrid(coordinate: number): number { let stepValue = 16; let rangeNumber = coordinate / stepValue; // Discard the fractional part rangeNumber = rangeNumber - (rangeNumber % 1); // We get a rangeNumber like: 0, 1, 2, ..., 25 // Snap a coordinate to the nearest grid node let remainder = coordinate % stepValue; let snappedCoordinate: number; if (remainder > stepValue / 2) { snappedCoordinate = (rangeNumber + 1) * stepValue; } else { snappedCoordinate = rangeNumber * stepValue; } return snappedCoordinate; } } }
  49. 1 point
    Andromedus

    Haw to snap a moving to a grid

    Divide the coordinate by the snap value (16 in your case), then round the number to an integer, and then mutiply by the snap value. So, for example, you want to snap an x-coordinate of 37 to the nearest multiple of 16: var x = 37; var snapValue = 16; var snappedX = Math.round(x / snapValue) * snapValue; This will give snappedX as 32. (Nice game, by the way. You'll want to tween the tank to the nearest snap value on releasing the cursor key, so it's always in the right position before turning. And so that you don't get the tank moving backwards on releasing the key, you should change Math.round in the algorithm above to either Math.floor or Math.ceil depending on which direction it's going, so it always tweens forward to the correct position)