FREE US SHIPPING ON ORDERS $175+

translation missing: en.general.currency.dropdown_label

0 Cart
Added to Cart
    You have items in your cart
    You have 1 item in your cart
      Total

      Game Development

      Little Medusa's Multiplayer Roster

      Little Medusa's Multiplayer Roster

      Hello there to all the stone pushers! We know you’ve been waiting for an update on Little Medusa’s multiplayer mode, and today, we’re finally allowed to spill some details on how our take on the battle royale formula is shaping up!


      So how would the game play out? We’re happy to report that we feel like we’ve successfully translated Little Medusa’s core gameplay mechanics and transformed it into a multiplayer experience that would be easy to learn for all kinds of players (while still providing enough wiggle room to show off a skilled player’s mastery over the game’s unique mechanics). Each player will still be trying to utilize the pushing mechanics of the single-player mode to eliminate the other players and be the one to come out on top.


      There are also quite a number of settings that you can adjust to fully customize your playing experience. You can toy with the number of lives that each player starts with, the amount of time that you have to duke it out, one-hit kills, item spawns, and even enemy spawns. No matter how you adjust your options, the end goal remains the same: be the last one standing!

       

       

      As for the specifics, we’ll slowly be rolling out details for the twelve maps and the myriad of items and enemies. For now, let’s give you some specifics on the five playable characters, with each character having two different attacks! Of course, we can’t have a character roster for Little Medusa without the titular character herself: Medusa plays pretty much the same way she does in the main game. She can petrify enemies with her Petrification Gaze. Petrified enemies can be pushed into walls for damage or pushed off of the level. Her other attack, Boulder, creates a boulder that blocks movement and also acts as a wall. These two attacks can be combined in clever ways, allowing Medusa players to create a boulder to smash petrified enemies.

       

       

      Our next two characters are Poseidonna and Heliemis. Poseidonna can create waves that push everything in their path off of the level with her Tidal Wave attack. She can also create a small bubble in one adjacent space to push enemies with her Bubble Shield. Both of her attacks don’t do any damage, but her insane pushing power makes her a force to be reckoned with. On the other hand, Heliemis’ Mighty Wind attack creates a gust that travels up to three spaces away and deals damage. The Tornado Pull attack creates a tornado that lasts for five seconds, pulling enemies in if they go near it. This allows for some wicked setups to trap an enemy in a tornado while blasting them with Mighty Wind.

       

       

      Our last two characters, Ermolai and Averna, round up the elemental quartet. Ermolai is the earth dude, and he’s all about creating holes in the ground. Pitfall doesn’t do damage but instead creates a hole in the ground. While this may seem underwhelming at first, if you manage to put a hole underneath your opponents, they instantly lose a life! His other ability, Earthquake, creates four holes around a 2x2 area, but it does resolve slower, so it’s trickier to make enemies fall off of it. It’s a good thing that it does damage! We’re only missing the fiery member of our group, and that’s Averna. She’s probably the simplest character in the game, but also the most damage-heavy. Both of her abilities will deal damage, with Fireball being a simple projectile that will deal damage upon contact and will deal additional AOE damage around it. Flame Pillar also does damage, but travels slower and has a lower overall distance, but utilizing both of her abilities can allow Averna players to take control of the battlefield.

       

       

      For now, we’re still at the balancing stages of the game, so we’re still checking out the numbers on these characters, but for the most part, these attacks are pretty much ready to roll. We want all five of them to be playable in some amount instead of any single one of them to dominate the playing field. We’ll definitely be telling you more about the other aspects of the game in the future, though, so stay tuned to our social media channels for further updates! You can also head on over to Mega Cat Studios for more retro gaming goodness.

      Product Page Creative Requirements

      Product Page Creative Requirements

      Preparing Your Product Pages
      Specifics on App Store and Google Play Requirements

      Setting up a product page for your apps comes with a lot of surprisingly specific details that you have to follow. This is especially egregious with product pages for mobile platforms due to how the Apple App Store and Google Play Store handles them differently. But don’t fret, because we’ve handily prepared this sweet cheat sheet to help you with figuring out how to best tackle the mobile market’s finicky product pages.

      Each element of your product page has different requirements depending on the specific platform they are in, so read on to know exactly what to do and what to avoid.

       


       

      APPLE APP STORE

       

      SCREENSHOTS

      The App Store puts screenshots as one of the first things that you see after accessing the product page, they make up a good chunk of a user’s first impression of your product. So always make sure that your screenshots are optimized and your other elements after the scroll follow-up on that impression.

      Content-wise, the rules for screenshots are easy to follow: They actually have to be screenshots. Images like real people having fun while looking over a phone’s screen are not allowed. However, the sizes are a bit more specific because you need to have screenshots for multiple types of devices.

      A screenshot taken from a minimum 5.5 inch display for iPhones should be included, as well as ones that were taken from at least a 12.9 inch display for iPads. You can have a minimum of one and a maximum of ten for each type, and they can be either in portrait or landscape. Remember that these screenshots are what makes the majority of a user’s first impressions, so displaying screenshots that are both impactful and meaningful will greatly affect how a user perceives your product.

      If you’re unsure if your screenshot would fit within Apple’s guidelines, you can check out their official list of screenshot specifications here.

       

      PREVIEW VIDEOS

      Much like screenshots, preview videos are also one of the first things that a user sees in the App Store after accessing your product page. These videos are actually located on top of the screenshots, so they are more of an immediate draw than the screenshots. However, these videos will automatically play on mute by default, so you always have to make sure that your videos will draw users in even without the sound turned on.

      Like screenshots, preview videos can either be in landscape or portrait, and a complete list of specifications for them can be found here.

       

      APP ICON

      When users simply browse the market instead of searching for your app directly on the search bar, an app’s icon will be the first thing that they will be seeing. This is why app icons need to stand out from a sea of similar looking icons. It has to encapsulate your product’s feel in one neat looking icon. Even when the user is scrolling through the app page, these icons will remain atop the page in a sticky header, putting even more pressure on it to deliver your product’s overall quality.

      Unlike the screenshots and preview videos, the app icon is pretty simple when it comes to specifications. They either have to be 512 x 512 pixels or 1024 x 1024 pixels, and they can be either in .jpg or .png formats.

       

      PAGE ARTWORK

       

      There are two types of page artwork: product page artwork and developer page artwork. Product page artwork will be needed in case your product is chosen by Apple to have its own artwork on the product page. It’s also needed for some of your product’s crowning moments of being featured in the App Store’s Today tab, which is a tab that highlights specific products in various blog style posts. Developer page artwork, on the other hand, is used to spice up your developer page, possibly leading to the user looking at the other products you have in store for them.

      However, no matter which type of page artwork you need, they will usually be cropped depending on what device your users are currently using. So it’s a good practice to have your page artwork’s most important elements be grouped up together in the image in such a manner that they can be framed nicely no matter which device that the page artwork is currently being viewed on. For more specifics on formatting your page artwork, you can view the official guidelines here.

       


       

      GOOGLE PLAY STORE

       

       

      SCREENSHOTS

      Like the App Store, screenshots in the Play Store are also seen immediately by the user even before they scroll down the product page, so it’s a good idea to have similarly impactful screenshots. You can have a minimum of two screenshots and a maximum of eight in either landscape or portrait formats.

      However, unlike the App Store, screenshots for the Play Store are looser in terms of actually being screenshots. You can have promotional artwork for in-product events, a composite of screenshots and elements from your product, and so on, as long as they follow specific requirements. Screenshots for the Play Store should have a minimum dimension of 320 px and a maximum of 3840 px, and the aspect ratio can’t be higher than 2:1 or 1:2.

      PREVIEW VIDEOS

      Unlike the App Store, videos on the Play Store are optional. However, if you decide to add one on your product page, you’ll find that they are actually YouTube videos that will only play once the user decides to access them. They will be displayed in the Play Store as video thumbnails with a play button overlaid on them.

      These videos should have a minimum length of 30 seconds and a maximum of 2 minutes. Since they are formatted as YouTube URLs, the video’s size is actually a bit flexible, but 1920 x 1080 would be a great size to use.

      APP ICON

      This is where there will be the least number of differences between the two stores. App icons will always be front and center when creating first impressions, so no matter the platform, your app icon should always pack a punch.

      However, size specifics are a bit different for the Play Store. They can only be 512 x 512 pixels large with a maximum of 1024 kb in terms of file size, and only png formats with alpha will be accepted.

       


       

      INSTALLING...

      Creating a strong impression for these seemingly tiny details can make all the difference in the world for your product. If any single one of these elements can catch a user’s curiosity, they can turn a browse into an install. And the more iconic any of these elements are, the higher the chances of such an event happening, which, in turn, will mean greater success for your product. Who knows, maybe this would turn any one of your blueprints into actual future endeavors.

      Phantom Gear: Playgrounds of Peril

      Phantom Gear: Playgrounds of Peril
      No matter how creative the enemies are or how beautiful you make your graphics, the main quality that players will be looking for in a 2D side-scroller is the level design. And while they may not exactly be aware of it, great level design will always make or break a game in terms of player experience. After all, you can’t simply have multiple levels with different kinds of set dressing on it and pass it off as great level design if all levels are simply the same in terms of layout.

      Read more

      Phantom Gear: Facing the Force

      Phantom Gear: Facing the Force

      Even the most battle hardened heroes need enemies to blast, and Phantom Gear’s protagonist, Josephine, will be no different. After all, what kind of game would an action platformer be without any foes to shoot at? Thankfully, Josephine is only clashing with a single organization within the game’s story, the Ocular Force, and it’s up to her to recover a piece of an energy source that can be the solution to their world’s problems.

      However, the Ocular Force is no slouch in their numbers, and there are plenty of mooks that Josephine has to face. Today, we’ll be taking a look at all these disposable bags of flesh and hunkering constructs of metal that Josephine has to deal with if she ever hopes to take back from them what they stole.

      Read more

      UE4 Performance Indicators and Solutions

      This doc outlines the primary performance indicators in the context of Unreal Engine, including how to measure them, and suggestions on addressing performance problems in each area.


      Reduce Draw Calls

      Draw calls are typically one of the most expensive parts of rendering a complex scene. This is among the first things you want to look into reducing as much as possible.

       

      How to Measure

      Use the console command stat RHI and check “DrawPrimitive calls” under the “Counters” category.

      Use the console command stat scenerendering and check “Mesh Draw calls” under the “Counters” category. Unlike the  “DrawPrimitive calls” counter, this counter will only show draw calls from meshes.

       

      Hierarchical Instanced Static Meshes

      Meshes that are rendered as a part of an instanced static mesh component (ISMC) or hierarchical instanced static mesh component (HISMC) will share draw calls. The difference between the ISMC and HISMC is that HISMCs support rendering different LODs for its instances at once, whereas with ISMC all rendered instances share the same LOD. For this reason, HISMC should be preferred, but in either case, there will be a draw call reduction. Note: since UE 4.22, with some limitations, the engine can automatically merge identical static meshes with the same materials and material uniform parameters into shared draw calls, similar to instanced meshing. However, this automation is limited to the DX11 feature set, so others such as DX12 or earlier than DX11 can’t receive this benefit (read more about this under “Draw Call Merging” here UE4 doc: Mesh Drawing Pipeline). For this reason, I will still recommend using instanced.

       

      Foliage Paint Assets Where Possible

      If you place static meshes using the foliage painter, each type of mesh painted will be rendered similarly as though they are all rendered through a hierarchical instanced static mesh component (HISMC). This is a simpler option than managing separate Actors interacting with a shared HISMC to add/remove themselves from the HISMC pool as needed. However, with this option, each placed static mesh is not its own Actor, reducing simulation/interaction options for gameplay purposes. Additionally, addition/removal of instanced static meshes through the foliage painter is only available at editor time, not runtime. As a result, this method should be preferred when you’re placing many common static meshes for set-dressing which do not need any C++/BP functionality built into them.

       

      Reduce Material Slots for Meshes

      Each material slot on a mesh will increase its draw call count. For clarity, material slots are different from texture uniform reference. Material slots are where you assign material instances. Material slot count is determined on the artist’s side when they design the mesh and determine which parts of the mesh will use different materials. While you can’t change this in-engine, you can check your mesh assets in-engine to determine if they have excessive material slots, and work with your artists to get them optimized to use less material slots. The most general rule of thumb is that the simpler the object, the fewer material slots it should have. For example, a rock should have one material slot, and a wood + metal bench could have two (one for the wood parts to share, and one for the metal parts to share). An example of an excessive material slot setup would be if each piece of wood or metal on the bench had its own material slot, resulting in a total of 8 material slots.

       

      Actor Merging

      Unreal is capable of merging multiple selected actors within a level into a single new actor. The main benefit to this feature is reducing draw calls. See their documentation here: UE4 docs: Actor Merging. Actor merging can be carried out in a couple ways. The first way will effectively create a new mesh (with new UVs) and even make a single material which is all the selected actor’s materials combined. This allows you to directly convert multiple draw calls caused by multiple actors into a single draw call.

      Actor merging also supports merging multiple actors into using one instanced mesh component. This is helpful for cases where you have many copies of the same static mesh actor.


      Reduce Rendered Tri Count

       

      How to Measure

      Use the console command stat RHI and check “Triangles drawn” under the “Counters” category.

       

      Creating Mesh LODs

      Creating different mesh LODs (levels of detail) will cause the mesh to render with reduced geometry complexity depending on its size as a percentage of the screen. Unreal can automatically generate LODs for your meshes with some simple configuration within the mesh’s asset. This is one of the simplest ways to reduce the number of rendered triangles.

      Resources:

       

      Cull Distance Volumes

      Culling distance volume actors allow fine-grained control over the culling the visibility of any actors within the volume based upon their size and distance from the camera. The amount of a tri draw reduction you can get from this depends on the use case. They are especially good for wide open environments with a range of object sizes.

      Resources:

       


      Reduce Overdraw

      Overdraw describes how often texels (pixels in the context of textures) are written to within a framebuffer in the scope of one frame. When rendering a scene with opaque materials, texels will usually be written to once. Texels are often written to many more times than once usually as a result of translucent or additive materials overlapping. For example, many fog particles overlapping result in the overlapped texels being written to many times, which is measured as a high amount of overdraw. Overdraw is most commonly a problem with foliage (which use the foliage card technique, in which you have a foliage texture on an alpha translucent material) and particle systems.

       

      Use Overdraw View Mode to Identify

       

       

       

       

      Reducing Overdraw

      The method to reduce overdraw is highly dependent on the specific cause of overdraw (for example, foliage, particle systems, or something else). This example looks at particle systems.

      Shown above is a sample particle system producing a large amount of overdraw with its additive particles. A common cause of frame rates dipping down is when particle systems are spawned which produce a lot of quad overdraw. Quad overdraw is difficult to avoid when making some kinds of particle systems, and some amount of it is okay for these use cases if it’s temporary. However, in order to reduce quad overdraw, effort should be made to reduce the amount of particles needed at once for these systems. Sometimes, this can be achieved without much change to the visuals of the system by reducing the quantity of the particles, and then increasing the opacity of the particles to compensate for the reduced particle quantity.


      Reduce Lighting Complexity

      Lighting complexity increases as dynamic light sources overlap. This is a significant source of performance cost from dynamic lights. Below is a sample scene with 3 point lights with different attenuation radius. We’ll then look at it with Light Complexity view mode.

       

       

       

       

      Reducing Lighting Complexity - Attenuation and Avoiding Overlap

      The difference in settings between all of these lights is just attenuation - no difference in intensity. The key takeaway is that the light’s attenuation setting is the factor which affects the radius in which it imposes a performance cost. Light intensity does not have an affect on this. As a result, make sure each dynamic light’s attenuation is proportional to how intense the light is and how much area it should visibly affect. As dynamic light sources move around, a smaller attenuation radius will reduce the amount they will overlap on average. You can see that where the 3 lights overlap, the complexity is the worst (the purple region in the center). In environments with dynamic lights, spacing them out to reduce overlap between their attenuations will reduce light complexity. Consider outright removing dynamic lights in cases with excessive light complexity.


      Reduce Skeletal Mesh Animation Costs

      Skeletal meshes contribute a significant amount to game-thread costs because they must tick and update on the CPU, on top of having to be rendered like a typical mesh on the render-thread. The methods outlined here are about measuring and reducing their performance impact on the game-thread (CPU).

       

      Measuring Skeletal Mesh Costs

      To quickly see how much skeletal meshes are contributing to game-thread costs, use the stat command stat anim. From here, you can see how much your skeletal meshes are taking to Tick each frame.

       

      Budgeted Skeletons

      The Animation Budget Allocator (ABA) allows you to define game-thread cost limits collectively for skeletons which interact with the ABA. You can have skeletal mesh components opt-in to the ABA system by replacing them with the type “Skeletal Mesh Component Budgeted”. The ABA will reduce animation quality for budgeted skeletons dynamically based upon current animation performance, and the way it reduces quality is configurable. For example, dynamically reducing component tick rate, and/or removing pose interpolation. It will apply these optimizations based upon the calculated “significance” of skeletal meshes. For example, skeletal meshes that are further away from the camera can have lower significance, and thus be subject to much more optimization than skeletons close to the camera. With the C++ API for the ABA, you can define your own custom significance function to suit your use case’s requirements.

      This should be the first optimization effort for your typical use cases of skeletal meshes, especially with how flexibly you can push the optimization with it.

      Read more about animation budgeting in the UE4 docs: Animation Budget Allocator

       

      Vertex Animation Textures

      Vertex Animation Textures (VATS) are textures within which all necessary data from a skeletal mesh’s animations are baked. This can include skeletal mesh LODs as well. The VATs are then rendered through static meshes, resulting in a significant performance improvement over skeletal meshes. Downsides to this method are that animation events and any tech achieved through animation graphs (such as anim blending) are not available. The robustness of the featureset depends on how the VAT baking and material functions which use it are implemented. There are a few plugins out there which implement them in a feature-rich way. This is one such plugin: Marketplace: Vertex Animation Toolset. VATs are ideal to use instead of skeletal meshes for animated actors which play a small/decorative role in gameplay and therefore don’t need the full feature set that comes with a skeletal mesh, such as environment creatures like birds or frogs. VATs are practically mandatory for cases where you need to render an extremely large amount of animated entities (5000+) of any complexity, such as in crowd simulation, in tandem with Hierarchical Instanced Static Mesh components.


      Usage of Tick()

      Many gameplay features can be implemented as a part of an Actor’s Tick(), but using Tick is the most expensive option as they run every single frame by default. A common cause of performance issues I’ve seen in several medium to large scope games is that most actors implement Tick(). While the tick itself only takes a fraction of a millisecond, if nearly all actors in the game use Tick(), those fractions of a millisecond end up adding up to a lot - sometimes most of the frame budget. As a result, overuse of Ticking is considered a death by a thousand cuts.

      Consider these alternatives instead of using Tick. Tick should be the last resort for implementing functionality.

      • Event-driven systems (In C++, this is using Delegates. In blueprints this is using event dispatchers)
      • Timers
      • Actor Timelines

      If you feel like Tick is still the best way to implement a feature, consider reducing the Tick Interval of the Actor. Usually, ticking once per frame is excessive (which is 60 times a second at 60 fps) - sometimes for example 5 times a second is enough. Ticking 5 times per second is 12x less expensive than 60 times per second.

       

      Checking for Prevalence of Tick()

      During runtime use the console commands stat startfile and stat stopfile to begin and end a performance profiling session. This will create a UE stats file which you can load in the profiler GUI. One place to open this data is the “Session Frontend” window, accessed from Window -> Developer Tools in the toolbar. See this page for reference on using the profiler: UE4 doc: Profiler Tool Reference. Once the profiler data is loaded in the GUI. Inspect it to see how much of your costs are collectively coming from your Tick() implementations across your class. For most games, Ticking should be a minority of game thread costs.


      Reduce Shader Complexity

      Shader complexity is defined as the amount of instructions a shader/material needs to execute. The more instructions, the higher the complexity, and the more expensive it is to render. Many materials in a game will typically have low complexity, but sometimes high complexity materials crop up, or many low-complexity shaders overlap due to translucency, adding up to high shader complexity for the covered pixels.


      Identifying Shader Complexity Issues

      Use the shader complexity view mode (hotkey Alt + 8) to switch the view mode to shader complexity.

       

       

       

       

      Above are examples of two cases where shader complexity is high. An opaque cube with a high complexity material (467 instructions), and a particle system with many overlapping low complexity translucent materials (60 instructions). You can read more about the view mode here: UE4 docs: Shader complexity view mode

       

      Reducing Shader Complexity

      For the particle system, the heat map looks similar to the quad overdraw view mode. The shader complexity in the case of the particle system is so high specifically because of the amount of quad overdraw (overlapping particle billboards, in this case). Optimizing the shader complexity of the particle material would be one angle of improving the shader complexity of the particle system, as would be reducing the amount of quad overdraw (see the section on Overdraw in this doc).

      Reducing shader complexity for opaque materials like in the case of the above example cube requires modifying the material. The way this is to be done depends on why the material is so expensive. You can experiment with reducing parts of the material, recompiling it, and checking the instruction count in the material’s output stats window to see the amount the instruction count has changed by.

       

       

      Types of commonly problematic content to check for high shader complexity in the context of a level include grass foliage, and situations in which there are many particle systems layering, such as during combat, or when environmental vfx are in play, like in a rainy environment.