UDK – Floating Islands.

Step 1: palm trees grow on islands

Floating Islands is a project for studies. We’re limited to use UDK so it’s a little step backward for me. Gaah, that interface The plan is to make 1 level where player needs to go from point A to B directly or by alternative route. See that island on the left? Thats my point B. I’m going to put a lot of floating rocks and lower the gravity a bit for some jump-action.

Performance wise, I’ve discovered that default UDK’s grass isn’t well optimised. Static mesh doesn’t have any LOD meshes and the best way to gain some performance is to force it disappear from the screen somehow (‘m not an expert, but I know some stuff). But I wanted to see more grass in the distance! So I imported this grass into Blender somehow, put 2 planes in the center, fix UV maps and export it back inside UDK. Now just set LOD 1 mesh, tweak some properties and Voila! From 50 to 100 FPS just as it should be. Now the rendering runs much faster and I can still see some grass in the distance Screenshot below:

Screenshot_2zoom

Included: Introduction

I’ve heard many opinions to start publishing your new game projects right from the start, from the very first line of code or concept art. This place is going to be just that.

What is “Included”?

“Included” is early codename for a puzzle 2.5D platformer strongly focused on Sci-fi and some astrophysical concepts. Player is put into young member of exploration crew on the first interstellar colony at Gliese 581g. Years pass and human race discover existence of mysterious entities scattered around the Gliesian star system. Invisible to naked eye, their readings indicate almost true similarity to theoretical wormholes. Those “inclusions” unlike wormholes, are wrapped spacetime (loops or bubbles as you wish) of the real world. You never know what kind of spacetime was wrapped inside those inclusions but It’s your job to explore and discover as much as you possibly can.

Gameplay focuses on using newly acquired powers to bend some laws of physics at your will, solving puzzles and more.

Technical stuff, consoles?

I’m developing this idea in Unreal Engine 4 for PC, Linux (Steam OS too) and Mac. I’m not aiming at consoles at all, because I’ve heard Indies have problems with publishing there. But also because I don’t have any bloody console, so why would I want to create a game for environment that I barely understand? When time comes, I plan to go for Steam Greenlight if this system is going to stay that long.

What now?

I could write endlessly about my idea of this game but I don’t like talking without providing, so… BACK TO WORK, BABE and see you next time!

I’ll try to update with any concept art, design prototypes, character design, so on and so forth.

Responsive Tabs

If you have a component with tabs in your non-mobile website you don’t think about “how will those look on smaller screens?” You already know it’s going to look ok but switching between tabs will not feel comfy in most cases. Instead you should wonder “how do I make it work well on mobile?” or “how to make tabs usable on smaller screens?”. Creating responsive tabs is important to make the website usable in every environment.

“Tabs”, how-to

Depending on a number of tabs in your component, making it look and work just like in desktop may not always be the best idea. You can make tabs a little bigger to make them easier to hit with your fingers. Sure, that’ll work on a component with 2 or 3 tabs (with small, non-descriptive captions on them). What if your component have more then 3 tabs or even better – dynamic number of tabs? Predicting the numbers and making silly styling adjustments for each of them is like ignoring a huge hole in your room and stepping over it, everytime you want to get out.

The perfect solution doesn’t need to be a hard one if you start thinking in Responsive Web Design and It doesn’t require any bloated jQuery plugin. While we’re still going to use a little bit of jQuery, It will only be used to switch between CSS classes.

Continue reading »

Chat with moderation

Realtime chat with moderation mode – which means that moderators can publish only hand-picked messages, which can be useful in Q&A sessions.

What is used

  • Node.js – server side JavaScript. Managing connected users, validating messages etc.
  • Socket.IO – real-time link between server server and client using HTML5 WebSocket.
  • AngularJS – for the client-side
  • Bower – package manager for the client stuff

It’s work in progress!

This project is in really early stage, right now It can function as simple chat app for everyone. There is no moderation mode yet. Feel free to for the source if you find it interesting.

Get it on BitBucket

https://bitbucket.org/zielakpl/chat

Scrollable off-canvas navigation in HTML mobile app

There are many different ways to achieve nice and fluid off-canvas navigation in mobile websites. Some simple solutions can be easily implemented in you mobile app without too much of a trouble. The problem comes when we want to create menu similar to those in native apps, like Google+ or new Gmail app. We start to design it on the computers, we put some JS and CSS definitions – everything works fine! By the time we open our app on the phone we realize that something is not quite right… and it get’s even worse on other or older devices.

Imitate native app’s navigation in HTML

On the new YouTube app, we have a combination of a fixed header and off-canvas menu. When we pull out menu, the rest of the containers stays on place. We can easily swipe through the list in menu and swipe it off to hide it.

I wanted to create similar menu, which slides in from left side of the screen when I tap a logo and hide it when I tap it again.

Continue reading »

The first one

Hi, I’m Darek Zieliński and I’ve just created the very first blog post here. This little blog is going to be filled with articles about glorious HTML, CSS, JS, Mobile-tastic experiences and many, maaany more.

I’m mostly interested in front-end-dev-whatever + a little bit of Ruby on Rails programming (making some JSON data provider for the Angular JS app, just for testing) BUT I might also go a bit into graphic design and usability – just because I like to make sure everything is polished. I’ll be sure to update at least once per week with new findings, tricks or other content – cross that out, I’m going to take my time to provide you with better content. Less quantity – more quality!

I’ve got that big project to make for financal company I work in – mobile HTML5 app. It’s going to be a huge challenge for me, so whenever I find “something funny” or worth sharing during development – I’ll make sure to post it in here.

Keep it simple!