SnakeCraft - Unity ile Android için oyun geliştirmek

İndirme adresi:

Download APK

Yukarıdaki linke tıklayıp paket yöneticisini seçerek ve güvenlik onayını vererek oyunu Android telefonunuza yükleyebilirsiniz. 

Bu makalede bambaşka bir konuya giriş yaptık: Unity ile oyun geliştirme. Bu alan eskiye göre şaşırtıcı derecede çok gelişmiş öyle ki youtube üzerinde zibilyon tane eğitim videosu bulabiliyorsunuz. Ben de dedim ki madem öyle bir tane de ben yapayım. Yapayım da asset oluşturma işi nasıl olacak? Onu da yapay zekaya çizdirdim. Çizdirdim ama tabi ki ince rötuşları çok yapamadım. Ama olsun yine de bir oyun çıktı ortaya. Şimdi biraz da para kazanmamız lazım. Bunun içinde AdMob var. Bu güzel olmuş hızlıca işlemleri bitirebildim. Hızlı ama sürücü belgenizi ve pasaportunuzu hazır edin. Pasaport olmadığı için ikametgah gönderdim kabul ettiler sağ olsunlar. Peki sonra nasıl yayınlayacağız bu oyunu? Google play consola üye olduk. Google öyle bir konsol  yapmış ki beyin yakıyor, ne nerede nasıl anlamak için Google mühendisi olmak lazım. Neyse araştırdık ve anladım ki kapalı teste girmek lazımmış. Bu durum konsol içinde gösteriliyor. Kapalı test içinse 12 tane kullanıcı lazım ve bu kullanıcıların bu oyunu 14 gün boyunca test etmesi gerekiyormuş. Tamam anladık kalite düşmesin veya düşen kaliteyi yükseltmek için böyle bir uygulama yapıyorsun da 12 adamı nereden bulup 14 gün test yaptıracağım şirket miyim ben? Hadi diyelim ki eşe dosta dağıttık. Araştırmalarıma göre onu da beğenmeyebiliyormuş Google Bey 14 gün daha uzatıyormuş süreci beğenene kadar. Ayrıca testçilere gönderilecek mail linkini de oluşturamadım. Ara yüze bakarak anlamak mümkün değil. Mesela durum "incelemede" görünüyor ve oyun taslak halinde. Taslak ne kim inceliyor incelendikten sonra ne olacak belli değil. Link belki bu yüzden görünmüyor. Yapay zekaya sordum o da işin içinden çıkamadı. Neyse youtube videolarından bu işi yapanlar linki kopyalayabiliyor, bir gün bende kopyalarım inşallah. Ek olarak birçok anket doldurmanız ve gizlilik politikası oluşturmanız da gerekiyor. Son olarak google play konsolunu kullanabilmek için 25$ ödemeniz gerekiyor. Heveslenen olursa tecrübelerimi paylaşmak için bu makaleyi yazdım. Yalnız parayı çok hızlı çekiyor böyle para çeken sistem daha görmedim tebrik ederim. Her şeye rağmen youtube beleş şimdi adamların haklarını da yemeyelim.

DTO projections via JPQL with Hibernate lazy initialization

DTO projections are very important to doing abstraction over model and data processing. Most common interests are fecthing data with a spesific partition and/or different format other than model. Also DTOs can be very usefull for partial database updates. In JPQL, query results can be transfered into DTOs with new keyword as following:

 

SELECT new org.module.submodule.ExampleDTO(b) FROM Book b

Also you can send parameters via constructor separately. But this approach provide you to control DTO flow and lazy initializations.

 

@Getter
@Setter
public class ExampleDTO {

    private String bookName;
    private Set<BookOwner> bookOwners;

    public ExampleDTO (Boob b) {
    
    	this.bookName = b.getName();
        this.bookOwners = b.getBookOwners();
        
        Hibernate.initialize(b.getBookOwners());
    }
}

In the constructor block, you can manage all initialization, property inclusions, property exclusions and customizations.

Generating GUID in excel using macro

For some reason, you may need to generate GUID in an excel document. For me, because of using GUID as primary keys in database, I have needed to generate insert scripts and GUIDs as primary keys. First of all you need to activate developer options of excel. After that, you are able to write macros. Finally, create a module and create function given below:

Function createguid()
Dim guid As String
guid = CreateObject("WScript.Shell").Exec("powershell -command [guid]::newGuid().ToString()").StdOut.ReadAll
createguid = Application.WorksheetFunction.Clean(guid)
End Function

In this approach, powershell is used for GUID generation. You can use this function in formulas after creation. Only drawback of this method is powershell console is opened and closed as many as generated GUIDs. 

Dynamically rendering HTML to image with javascript and SVG without using any external library

In this article, we render CSS styled HTML to image. With this method, HTML can be exported to png, jpeg or bmp without using any external js library. SVG 2 is a new recommendation that is exposed by w3 consortium. SVG 2 has a new feature, foreign object, that enables us to use different rendering engines in a SVG representation. So, we use HTML rendering engine to render image representation of HTML. Example codes are at below:

<div id="export_html_to_svg_container" style="display: flex;flex-direction: row;width: 300px; height: 100px;flex-grow: 1">
    <div style="width: 100%; background-color: #ff7070;"></div>
    <div style="display: flex;justify-content: center;text-align: center;align-items: center;width: 100%;background: #a624a8;font-weight: 500;color: white;">OUTPUT</div>
    <div style="width: 100%; background-color: #7070ff;"></div>
</div>

<div style="margin-top:10px">
    <button onclick="exportToImage('png')">PNG</button>
    <button onclick="exportToImage('jpeg')">JPEG</button>
    <button onclick="exportToImage('bmp')">BMP</button>
</div>

<script>

    function exportToImage(imageType) {

        let content = document.getElementById("export_html_to_svg_container");
        let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        let foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");      

        svg.appendChild(foreignObject);
        foreignObject.innerHTML = content.outerHTML;
        svg.setAttribute("width", "300px");
        svg.setAttribute("height", "100px");
        foreignObject.setAttribute("width", "100%");
        foreignObject.setAttribute("height", "100%");

        let serializer = new XMLSerializer();
        let serializedContent = serializer.serializeToString(svg);
        let base64Content = btoa(serializedContent);
        let imageUrl = "data:image/svg+xml;base64," + base64Content;
        let img = document.createElement("img");
        
        img.onerror = function (a, b) {
            alert("error");
        }

        img.onload = function () {

            let canvas = document.createElement("canvas");
            let context = canvas.getContext("2d");
            context.drawImage(img, 0, 0);
            let dataUrl = canvas.toDataURL("image/" + imageType);
            simulateDownload("output." + imageType, dataUrl);
        }

        img.src = imageUrl;
    }

    function simulateDownload(download, href) {
        const a = document.createElement('a');
        a.download = download;
        a.href = href;
        a.click();
        a.remove();
    }

</script>

In example, we render div (export_html_to_svg_container) object with its content to image.  First of all, we create an SVG object. We need a foreign object to place the HTML in, so we create one. We put the HTML in the foreign object and the foreign object in the SVG object. Before rendering, we must set the SVG object's width and height attributes. Finally, we serialize the SVG object to string with XMLSerializer and generate an image url using that string. With this url, we render the output image with the help of the image(img) object and canvas.

This method is compatible with many modern browsers like Chrome, Firefox and Edge.

Working Example:

OUTPUT

k Nearest Neighbours Classifier (kNN) with Javascript Implementation for Beginners

k Nearest Neighbours Classifier (kNN) is a powerful but computational costly nonlinear classifier. Basically, kNN works based on distance calculation and finding of closest neighbour vectors according to a distance function. Distance function can be l1 (Manhattan distance), l2 (Euclidean distance) or a different available appropriate distance function. kNN uses a hyper parameter (k) that implies count of closest neighbours. 

Algorithm find closest k vector to current vector, and returns classification result as class label of the largest matched number of class between these k closest vectors.

In this example; classes 1,2,3 corresponds to red, green and purple respectively. Algorithm takes k, x and y as input and return class label as color and draw last input point as a orange point. 

->k

->X

->Y

Javascript Codes:

document.addEventListener('DOMContentLoaded', (e) => {

            drawPoints();
        });

        var point = { x: 0, y: 0 };
        var k = 3;

        var datas = [

            { c: 1, x: 10, y: 100 },
            { c: 1, x: -10, y: 50 },
            { c: 1, x: 50, y: 150 },
            { c: 2, x: 100, y: 80 },
            { c: 1, x: 30, y: 200 },
            { c: 2, x: 200, y: 50 },
            { c: 2, x: 120, y: 30 },
            { c: 2, x: 100, y: 150 },
            { c: 3, x: 300, y: 50 },
            { c: 1, x: -150, y: 200 },
            { c: 3, x: -300, y: 400 },
            { c: 3, x: 233, y: 333 },
            { c: 2, x: 127, y: 190 },
            { c: 3, x: 100, y: -32 },
            { c: 1, x: -50, y: -12 },
            { c: 1, x: -101, y: -50 },
            { c: 1, x: -301, y: -19 },
            { c: 2, x: 127, y: -22 },
            { c: 3, x: 120, y: -100 },
            { c: 2, x: -50, y: -200 },
            { c: 3, x: 800, y: 100 },
            { c: 3, x: 150, y: -150 },
            { c: 3, x: 70, y: -80 },
            { c: 3, x: 70, y: -500 },
            { c: 3, x: 200, y: -300 },
            { c: 2, x: -50, y: -150 },
            { c: 3, x: 111, y: -200 },
            { c: 3, x: 301, y: -310 },
            { c: 3, x: 200, y: -151 },
            { c: 1, x: -122, y: -99 },
            { c: 1, x: -301, y: -499 },
            { c: 1, x: 401, y: -1 },
        ];

        function start() {

            let classColor = "";

            setValues();

            drawCurrentPoint();

            let c = knnClassify();

            if (c == 1)
                classColor = "red";
            else if (c == 2)
                classColor = "green";
            else
                classColor = "purple";

            alert(classColor);
        }

        function knnClassify() {

            var classificationResults = [

                { c: 1, count: 0 },
                { c: 2, count: 0 },
                { c: 3, count: 0 }
            ];

            let distances = [];

            for (let i = 0; i < datas.length; i++) {

                let distance = l2Distance(datas[i], point);
                let distanceToClass = { c: datas[i].c, d: distance };

                distances.push(distanceToClass);
            }

            distances.sort(function (a, b) {

                return a.d - b.d;
            });

            for (let i = 0; i < k; i++) {

                for (let k = 0; k < classificationResults.length; k++) {

                    if (classificationResults[k].c == distances[i].c) {

                        classificationResults[k].count++;
                    }
                }
            }

            classificationResults.sort(function (a, b) {

                return b.count - a.count;
            });

            return classificationResults[0].c;
        }

        function l2Distance(point1, point2) {

            return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
        }

        function drawPoints() {

            var canvas = document.getElementById("g");

            for (let i = 0; i < datas.length; i++) {

                let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');;
                circle.setAttributeNS(null, "cx", datas[i].x);
                circle.setAttributeNS(null, "cy", datas[i].y);
                circle.setAttributeNS(null, "r", 3);

                if (datas[i].c == 1)
                    circle.setAttributeNS(null, "fill", "red");
                else if (datas[i].c == 2)
                    circle.setAttributeNS(null, "fill", "green");
                else
                    circle.setAttributeNS(null, "fill", "purple");

                canvas.appendChild(circle);
            }
        }

        function drawCurrentPoint() {

            var canvas = document.getElementById("g");

            let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttributeNS(null, "cx", point.x);
            circle.setAttributeNS(null, "cy", point.y);
            circle.setAttributeNS(null, "r", 3);

            circle.setAttributeNS(null, "fill", "orange");

            canvas.appendChild(circle);
        }
                   
        function setValues() {

            k = parseFloat(document.getElementById("pk").value);
            point.x = parseFloat(document.getElementById("pX").value);
            point.y = parseFloat(document.getElementById("pY").value);
        }

HTML Codes:

    <div>
        <input id="pk" type="text" value="3" />->k
    </div>
    <div>
        <input id="pX" type="text" value="0" />->X
    </div>
    <div>
        <input id="pY" type="text" value="0" />->Y
    </div>

    <div id="resultDiv" style="margin-top: 20px;"></div>
    <div style="margin-top: 20px;">
        <button onclick="start()" type="button">CLASSIFY</button>
    </div>

    <div style="margin-top: 50px;">
        <svg height="500" id="canvas" width="500">
            <g id="g" transform="translate(250 250) scale(1,-1)">
                <line style="stroke-width: 1; stroke: rgb(0, 0, 255);" x1="-1000" x2="1000" y1="0" y2="0"></line>
                <line style="stroke-width: 1; stroke: rgb(0, 0, 255);" x1="0" x2="0" y1="-1000" y2="1000"></line>

            </g>
        </svg>
    </div>

Devextreme Toast Wrapper for Global Widget Configuration

While using Devextreme toast widget, you may need to configure it. By default, toast widget placed bottom middle of window. In this article, I write a wrapper javascript code to configure widget globally, and I provide to show widged at bottom right of window and widget will be continuing to display content while mouse hover on it. This wrapper code is also compatible with older browsers. 

Wrapper code is dependent to Jquery.

dx-toast-wrapper.js:

var toastDefault = {

            width: "500px",
            displayTime: 4000,
            cancelHiding: false,

            contentTemplate: null,

            position: {

                at: "right bottom",
                collision: "fit",
                boundaryOffset: "20 20",

            },

            onContentReady: function (e) {

                $(e.element).on("mouseenter", function () {

                    this.cancelHiding = true;

                }.bind(this));

                $(e.element).on("mouseleave", function () {

                    this.cancelHiding = false;
                    e.component.hide();

                }.bind(this));
            }.bind(this),

            onHiding: function (e) {

                e.cancel = this.cancelHiding;

            }.bind(this)
        };

        var toast = {

            success: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "success";

                DevExpress.ui.notify(toastDefault);
            },
            error: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "error";

                DevExpress.ui.notify(toastDefault);
            },
            info: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "info";

                DevExpress.ui.notify(toastDefault);
            },
            warning: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "warning";

                DevExpress.ui.notify(toastDefault);
            }
        }

You can use Devextreme toast like that:

index.html:

<script>
toast.success("Success message");
toast.error("Error message");
toast.info("Info message");
toast.warning("Warning message");
</script>

Using ProjectBaseCore without Dependency Injection

We can use ProjectBaseCore(PBC) without dependency injection(DI) by instantiating DatabaseFactory class with new keyword. We can give to factory class's constructor function a object that is implemented IConfiguration interface, or we can create database object by simply giving connection string and provider parameters to GetDbObject function. I give a console application example of how to use PBC without DI.

Program.cs:

class Program
{
   static void Main(string[] args)
   {
        DatabaseFactory databaseFactory = new DatabaseFactory(GetConfiguration());
        IDatabase2 db = databaseFactory.GetDbObject();
        var dt = db.ExecuteQueryDataTable("select * from product");
   }

   static IConfigurationRoot GetConfiguration()
   {
         var builder = new ConfigurationBuilder()
           .SetBasePath(System.AppContext.BaseDirectory)
           .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true);

         return builder.Build();
   }
}

appsettings.json:

{
  "DefaultDb": "Context",
  "ContextProviderName": "MySql.Data.MySqlClient",
  "ConnectionStrings": {
    "Context": "Server=localhost;Database=db;Uid=root;Pwd=1234;"
  }
}